Sissejuhatus
Kergekaaluliste rakenduste arendamisel – võib-olla soovime salvestada mõningaid andmeid. Kui andmebaas on üle jõu käiv, on olemas suurepärane alternatiiv: localStorage!
Ehkki see ei asenda andmebaasi andmebaasi jaoks, toimib see lihtsa failipõhise salvestussüsteemina, mida saate hõlpsasti juurdepääsetavate andmepunktide salvestamiseks kasutada.
Selles artiklis õpime, kuidas seda kasutada
localStorageandmete hõlpsaks salvestamiseks meie brauseris. Need andmed salvestatakse kui võtmeväärtuste paarid mida kasutaja saab hõlpsasti kätte saada.
Andmete salvestamine asukohta localStorage Reactis on ülilihtne:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Kui te ei kiirusta ja soovite selle toimimise kohta rohkem teada saada, jätkake lugemist!
Mis on kohalik salvestusruum?
localStorage on veebisalvestusobjekt, mis võimaldab arendajatel salvestada võtmeväärtuste paarid veebibrauseris ja tagab, et need andmed säilivad kogu lehe värskendamise ajal, isegi kui kasutaja brauseri sulgeb või taaskäivitab – ja neil pole aegumiskuupäeva. Salvestatud võtme-väärtuste paarid võivad sisaldada mis tahes tüüpi andmeid – massiive, objekte, stringe, numbreid ja paljusid teisi.
See ei saa aga asendada andmebaaside rolli teie veebisaitidel ja veebirakendustes, sest andmed lähevad kaotsi, kui kasutaja tühjendab brauseri vahemälu ja kohaliku salvestusruumi – lõppkokkuvõttes on see kohalik ladustamine ja seda tuleks sellisena kasutada. Sellegipoolest on olukordi, kus kasutaja saab seda kasutada localStorage, nagu rakendamine tume režiim funktsioon, kasutaja vormi sisendväärtuse säilitamine ja paljud teised.
localStorage on sisseehitatud meetodid, mis võimaldavad meil pääseda juurde brauseri salvestusobjektile. Üks näide on setItem() meetod, mis võimaldab meil lisada võtme ja väärtuse localStorage, mis võimaldab meil andmeid salvestada. Andmete hankimiseks kasutatakse muid meetodeid – getItem(), kustuta andmed – removeItem(), Kustuta kõik localStorage juhtumid - clear(), ja nii edasi.
Andmete salvestamine kohalik salvestusruum Koos setItem() Meetod
. setItem() meetod võimaldab meil salvestada mis tahes andmetüübi väärtused localStorage määrates klahvidele väärtusi, mille tulemuseks on a võtme-väärtuse paar. Seda võtit kasutatakse vastava väärtuse hankimiseks alati, kui soovime seda tuua localStorage.
Märge: Andmete salvestamiseks localStorage, peame selle esmalt teisendama JSON-string kasutades JSON.stringify() funktsiooni. Ja kui tahame seda laadida, sõelume andmeid kasutades JSON.parse(), teisendades JSON-stringi tagasi a-ks JSON-objekt.
Reactis andmetega töötades kasutame sageli konksud et aidata meil seda säilitada/hoida. Konksud võivad samuti aidata meil leida, kuhu need andmed üles laadida. See kehtib ka kohta localStorage sest me kasutame useState() ja useEffect() konksud. Need konksud on kriitilised, kuna useState() konksu kasutatakse andmete hoidmiseks ja seadistamiseks, samas kui useEffect() hook käivitatakse vaikimisi pärast esimest renderdamist ja iga kord, kui olek on teise parameetri muutumisel edasi antud.
Pärast vundamendi selgitamist on siin kood, mida kasutaksime andmete salvestamiseks localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Oleme esmalt loonud oleku, milles hoitakse andmeid, mida tahame omasse salvestada localStorageja siis oleme loonud a useEffect() konks, oleku läbimine teise parameetrina. Nii muutuvad oleku muutumisel failis olevad andmed localStorage värskendatakse praegusele väärtusele.
Käsitlesime põhifunktsioone, mida kasutatakse andmete salvestamisel abistamiseks useEffect() konks:
localStorage.setItem('dataKey', JSON.stringify(data));
Järeldus
Selles artiklis õppisime, kuidas kasutada Reacti konkse andmete salvestamiseks Reactis kasutades localStorage. Nagu eelnevalt öeldud, ei asenda see kunagi andmebaasi rolli, vaid pigem aitab meil salvestada mõningaid kasutajaga seotud andmeid, mis võivad kasutajaliidest täiustada, kuid mis ei ole mõeldud säilitamiseks brauserist sõltumatult.
