09. Indexeddb, localstorage - kristijan-perkovic96/Osnove-reacta GitHub Wiki

Vjerojatno ste primijetili da ako imate input polja te ako u njih unesete vrijednost i pritisnete F5 ta vrijednost nestane. Razlog toga je što komponente izgubi state te ga vrati na inicijalne vrijednost. Pošto je input većinom inicijalno prazno polje iz toga razloga se vrijednost obriše.

Jedno od rješenja je da unutar browsera pohranite tu vrijednost svaki put kada radite izmjenu te da prilikom kreiranja komponente učitate tu vrijednost. Za navedene aktivnosti možete koristiti više stvari no u ovom primjeru će se koristiti localstorage i indexeddb.

Localstorage

Prvi primjer će koristiti localstorage, pošto ćemo vrijednost pohraniti i u state i u localstorage ne možemo na onChange staviti samo this.setState već moramo kreirati metodu u kojoj ćemo obaviti oboje.

Naša metoda se zove postaviVrijednost te kao parametar prima unesenu vrijednost. Kako bismo postavili vrijednost u localstorage koristimo metotu setItem koja kao parametre prima ključ pod kojim će pohraniti vrijednost te vrijednost. U našem slučaju se metoda setItem poziva u callback function nakon što se postavi vrijednost u state.

Možete provjeriti je li se vrijednost postavila u localstorage:

Sada ćemo napraviti preuzimanje vrijednosti iz loacalstorage. Za dohvaćanje vrijednosti potrebno je korisiti metodu getItem te kao parametar proslijediti ključ pod kojim je vrijednost pohranjena. Ovu metodu smo pozvali unutar componentDidMount metode koja je jedna od predefiniranih reactovih metoda koje se pozivaju prilikom kreiranja komponente. Iz toga razloga će se vrijednost prikazati i u slučaju kada pritisnemo F5 te osvježimo stranicu.

Indexeddb

Kako bismo koristili indexeddb potrebno je da kreiramo store, za kreiranje store koristimo metodu createStore koja kao parametre prima naziv store-a te kako će se zvati recimo tablica unutar koje će se spremati vrijednosti. Naravno najprije moramo instalirati sljedeće: npm i idb-keyval Unutar state-a konponente ćemo kreirati store : myStore: createStore("custom-store","table"). Kako bismo postavili vrijednost u naš indexeddb koristit ćemo metodu set koja kao parametre prima ključ pod kojim će se spremiti naša vrijednost, vrijednost koju spremamo te store u koji spremamo. Primjer : set("input",vrijednost, this.state.myStore); Ukoliko postavimo ovu liniju u našu metodu postaviVrijednost umijesto localStorage.setItem("input", vrijednost) tada ćemo vrijednost spremati u indexeddb.

Preuzimanje vrijednosti se vrši pomoću metode get koja za parametre prima ključ i store iz kojeg želimo preuzeti vrijednost. Pošto se radi o asinkronoj metodi potrebno je dodati then klauzulu koja će nam omogućiti korištenje callback funkcije. Get metodu također pozivamo unutar componentDidMount.