Ar norėtumėte sukurti užduočių atlikimo programą, kuri išsaugotų ir įkeltų savo duomenis net po to, kai puslapis buvo perkrautas? Naudojant "React" ir vietinės saugyklos API tai nėra taip sudėtinga, kaip gali atrodyti. Šiame vadove jums parodysiu, kaip naršyklėje nuolat išsaugoti to-dos, kad jie išliktų po sesijos. Taip galėsite bet kada tvarkyti savo to-dos neprarasdami jų.
Pagrindinės išvados
- Naudokite vietinę saugyklą duomenims naršyklėje išsaugoti.
- Įkelkite išsaugotus to-dos paleisdami programą.
- Atnaujinkite vietinę saugyklą, kai atliekami to-dos pakeitimai.
Žingsnis po žingsnio
1. Projekto parengimas
Pirmiausia turite įsitikinti, kad turite paprastą "React" programą su pagrindine struktūra. Jei vis dar susiduriate su konfigūracija, pirmiausia turėtumėte tai padaryti.
2. būsenos savybių apibrėžimas
Savo užduočių būseną valdote savo App.jsx faile. Čia apibrėžiate savo to-dos būseną, kuri iš pradžių inicializuojama tuščiu masyvu.
3. to-dos įkėlimas iš vietinės saugyklos
Dabar norite įkelti to-dos iš vietinės saugyklos, užuot visada pradėję nuo tuščio masyvo. Norėdami tai padaryti, turite pridėti funkciją, kuri paraiškai įsijungus atsiunčia duomenis.
4. Įtraukite įkėlimo funkciją
Reikia sukurti įkėlimo funkciją, kuri paleidimo metu užklausia to-dos. Ši funkcija gaus duomenis su window.localStorage.getItem. Atminkite, kad duomenys saugomi kaip JSON eilutė, todėl reikia juos konvertuoti į "JavaScript" masyvą naudojant JSON.parse.
5. "to-dos" išsaugojimas vietinėje saugykloje
Jei pridedate naujų to-dos arba redaguojate esamus, turite užtikrinti, kad šie pakeitimai atsispindėtų ir vietinėje saugykloje. Norėdami tai padaryti, sukurkite išsaugojimo funkciją, kuri atitinkamai iškviečiama, kai atnaujinama būsena. Naudokite window.localStorage.setItem, kad išsaugotumėte duomenis pagal konkretų raktą.
6. Išbandykite išsaugojimą
Pridėkite kelis to-dos ir tada patikrinkite, ar jie išsaugomi vietinėje saugykloje. Tai galite padaryti vizualiai tikrindami derintuve arba naudodami naršyklės kūrėjo įrankius.
7. ištrinti to-dos
Ištrynus to-dos, taip pat turėtų būti atnaujinta vietinė saugykla. Įsitikinkite, kad po to, kai ištrinate to-do, iškviečiate išsaugojimo funkciją, kad Vietinėje saugykloje būtų išsaugota naujausia būsena.
8. tuščių duomenų įkėlimo funkcijos pritaikymas
Jei įkeliant duomenis vietinė saugykla yra tuščia, norite įsitikinti, kad būsena inicializuojama tuščiu masyvu, kad išvengtumėte klaidų. Taigi prieš įkeldami duomenis patikrinkite, ar jie egzistuoja.
9. sukurkite naudotojo sąsają
Dabar turėtumėte įsitikinti, kad jūsų vartotojo sąsaja teisingai rodo visus elementus ir kad naudotojai gali pridėti naujų to-dos, redaguoti esamas ir jas ištrinti. Patikrinkite, ar kiekvienas veiksmas atitinkamai atnaujina vartotojo sąsają ir vietinę saugyklą.
10. patikrinkite įgyvendinimą
Kruopščiai išbandykite savo programą. Perkraukite puslapį, pridėkite arba pašalinkite to-dos ir įsitikinkite, kad viskas veikia taip, kaip norima. Po perkrovimo duomenys turėtų būti rodomi taip, kaip tikėtasi.
Apibendrinimas
Dabar sužinojote, kaip sukurti to-do programą, kuri išsaugo savo įrašus vietinėje saugykloje ir vėl juos įkelia, kai puslapis perkraunamas. Vietinė saugykla yra paprastas ir veiksmingas būdas išsaugoti duomenis kliento pusėje. Sumaniai naudodami "localStorage" galite padaryti savo programą patogesnę ir taip pasiūlyti geresnę vartotojo patirtį.
Dažniausiai užduodami klausimai
Kaip išsaugoti duomenis vietinėje saugykloje? Duomenis į vietinę saugyklą išsaugote naudodami localStorage.setItem('key', 'value').
Kaip įkelti duomenis iš vietinės saugyklos? Duomenis įkeliate naudodami localStorage.getItem('key') ir gali tekti juos konvertuoti naudojant JSON.parse.
Kas atsitinka, jei vietinė saugykla yra tuščia? Jei vietinė saugykla yra tuščia, turėtumėte užtikrinti, kad jūsų būsena būtų inicializuota tuščiu masyvu, kad išvengtumėte klaidų.
Ar galiu naudoti kitas duomenų bazes? Taip, yra ir kitų galimybių, pavyzdžiui, IndexedDB arba debesijos sprendimai, priklausomai nuo jūsų taikomosios programos poreikių.
