esittely
Kevyitä sovelluksia kehitettäessä saatamme haluta tallentaa tietoja. Jos tietokanta on ylivoimainen, on olemassa loistava vaihtoehto: localStorage!
Vaikka se ei korvaa tietokantaa tietokantatarkoituksiin, se toimii yksinkertaisena tiedostopohjaisena tallennusjärjestelmänä, jota voit hyödyntää helposti saatavilla olevien tietopisteiden tallentamiseen.
Tässä artikkelissa opit käyttämään
localStoragetallentaaksesi tietoja helposti selaimeemme. Nämä tiedot tallennetaan nimellä avain-arvo-pareja jonka käyttäjä voi helposti hakea.
Tallennetaan tietoja kohteeseen localStorage Reactissa on erittäin helppoa:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Jos sinulla ei ole kiirettä ja haluat oppia lisää tämän toiminnasta, jatka lukemista!
Mikä on localStoragea?
localStorage on web-tallennusobjekti, jonka avulla kehittäjät voivat tallentaa avain-arvo-pareja verkkoselaimessa ja varmistaa, että nämä tiedot säilyvät kaikkien sivujen päivitysten jälkeen, vaikka käyttäjä sulkee tai käynnistää selaimen uudelleen – eikä niillä ole vanhentumispäivää. Tallennetut avain-arvo-parit voivat sisältää minkä tahansa tyyppistä dataa – taulukoita, objekteja, merkkijonoja, numeroita ja monia muita.
Tämä ei kuitenkaan voi korvata tietokantojen roolia verkkosivustoissasi ja verkkosovelluksissasi, koska tiedot menetetään, kun käyttäjä tyhjentää selaimen välimuistin ja paikallisen tallennustilan – viime kädessä paikallinen varastointi ja sitä tulee käyttää sellaisenaan. On kuitenkin tilanteita, joissa käyttäjä voi käyttää localStorage, kuten täytäntöönpano tumma tila ominaisuus, käyttäjän lomakkeen syöttöarvon säilyminen ja monet muut.
localStorage on sisäänrakennettuja menetelmiä, joiden avulla voimme käyttää selaimen tallennusobjektia. Yksi esimerkki on setItem() menetelmä, jonka avulla voimme lisätä avaimen ja arvon localStorage, joten voimme tallentaa tietoja. Muita menetelmiä käytetään tietojen hakemiseen - getItem(), poista tiedot - removeItem(), Tyhjennä localStorage tapaukset - clear(), Ja niin edelleen.
Tietojen tallennus kohteeseen localStoragea Kanssa setItem() Menetelmä
- setItem() menetelmän avulla voimme tallentaa minkä tahansa tietotyypin arvot localStorage määrittämällä arvoja avaimille, jolloin tuloksena on a avainarvo-pari. Tätä avainta käytettäisiin vastaavan arvon hakemiseen aina, kun haluamme hakea sen localStorage.
Huomautus: Tietojen tallentamiseksi localStorage, meidän on ensin muutettava se muotoon JSON-merkkijono käyttäen JSON.stringify() toiminto. Ja kun haluamme noutaa sen, jäsennämme tiedot käyttämällä JSON.parse(), muuntaa JSON-merkkijonon takaisin muotoon a JSON-objekti.
Kun työskentelemme tietojen kanssa Reactissa, käytämme usein koukut auttaa meitä säilyttämään/pitämään sitä. Koukut voivat myös auttaa meitä löytämään, minne tiedot ladataan. Tämä koskee myös localStorage koska aiomme käyttää useState() ja useEffect() koukut. Nämä koukut ovat kriittisiä, koska useState() koukkua käytetään tietojen säilyttämiseen ja asettamiseen, kun taas useEffect() hook laukeaa oletusarvoisesti ensimmäisen renderöinnin jälkeen ja aina, kun tila välitetään toisen parametrin muuttuessa.
Perusteen selityksen jälkeen tässä on koodi, johon käyttäisimme tietojen tallentamiseen localStorage:
const [data, setData] = useState([]);
useEffect(() => {
localStorage.setItem('dataKey', JSON.stringify(data));
}, [data]);
Olemme ensin luoneet tilan, jossa säilytetään tiedot, jotka haluamme tallentaa localStorage, ja sitten olemme luoneet a useEffect() koukku, välittää tilan toisena parametrina. Tällä tavalla aina, kun tila muuttuu, tiedot localStorage päivitetään nykyiseen arvoon.
Hoidimme ydintoiminnot, joita käytetään apuna tietojen tallentamisessa useEffect() koukku:
localStorage.setItem('dataKey', JSON.stringify(data));
Yhteenveto
Tässä artikkelissa opimme käyttämään React-koukkuja tietojen tallentamiseen Reactissa käyttämällä localStorage. Kuten aiemmin todettiin, tämä ei koskaan korvaa tietokannan roolia, vaan pikemminkin auttaa meitä tallentamaan käyttäjiin liittyviä tietoja, jotka voivat parantaa käyttöliittymää, mutta joita ei ole tarkoitettu säilytettäväksi selaimesta riippumattomasti.
