Vai vēlaties izveidot to-do lietotni, kas saglabā un ielādē savus datus pat pēc lapas pārlādēšanas? Ar React un vietējās krātuves API tas nav tik sarežģīti, kā varētu šķist. Šajā rokasgrāmatā es jums parādīšu, kā pastāvīgi saglabāt uzdevumus pārlūkā, lai tie izdzīvotu sesijā. Šādā veidā jūs varat pārvaldīt savus to-dos jebkurā laikā, tos nezaudējot.
Galvenie secinājumi
- Izmantojiet vietējo krātuvi, lai saglabātu datus pārlūkprogrammā.
- Ielādējiet saglabātos to-dos, uzsākot lietojumprogrammu.
- Atjauniniet vietējo krātuvi, kad tiek veiktas izmaiņas uzdevumos.
Soli pa solim
1. Projekta sagatavošana
Vispirms jums jāpārliecinās, ka jums ir vienkārša React lietotne ar pamata struktūru. Ja jums joprojām ir grūtības ar iestatīšanu, vispirms veiciet šo darbību.
2. stāvokļa īpašību definēšana
Jūs pārvaldāt savu to-dos stāvokli savā App.jsx failā. Šeit jūs definējat savu to-dos stāvokli, kas sākotnēji tiek inicializēts ar tukšu masīvu.
3. to-dos ielādēšana no vietējās krātuves
Tagad vēlaties ielādēt to-dos no vietējās krātuves, nevis vienmēr sākt no tukša masīva. Lai to izdarītu, jums ir jāpievieno funkcija, kas ielādē datus, kad tiek palaista lietojumprogramma.
4. ielādes funkcijas iekļaušana
Jums ir jāizveido ielādes funkcija, kas pieprasa jūsu to-dos, kad tiek palaista lietojumprogramma. Šī funkcija iegūst datus ar window.localStorage.getItem. Atcerieties, ka dati tiek glabāti kā JSON virkne, un jums tie jāpārveido JavaScript masīvā, izmantojot JSON.parse.
5. to-dos saglabāšana vietējā krātuvē
Ja pievienojat jaunus to-dos vai rediģējat esošos to-dos, jums jānodrošina, lai šīs izmaiņas tiktu atspoguļotas arī lokālajā krātuvē. Lai to izdarītu, izveidojiet saglabāšanas funkciju, kas tiek attiecīgi izsaukta, kad tiek atjaunināts statuss. Izmantojiet window.localStorage.setItem, lai saglabātu datus ar konkrētu atslēgu.
6. Pārbaudiet saglabāšanu
Pievienojiet vairākus uzdevumus un pēc tam pārbaudiet, vai tie tiek saglabāti vietējā krātuvē. To var izdarīt, vizuāli pārbaudot atkļūdošanas programmā vai izmantojot pārlūkprogrammas izstrādātāja rīkus.
7. to-dos dzēšana
Izdzēšot to-dos, vajadzētu atjaunināt arī vietējo krātuvi. Pārliecinieties, ka pēc to-do dzēšanas izsaucat saglabāšanas funkciju, lai nodrošinātu, ka vietējā krātuvē tiek saglabāts jaunākais stāvoklis.
8. ielādes funkcijas pielāgošana tukšiem datiem
Ja ielādējot datus, lokālā krātuve ir tukša, lai izvairītos no kļūdām, ir jāpārliecinās, ka stāvoklis tiek inicializēts ar tukšu masīvu. Tāpēc pirms ielādēšanas pārbaudiet, vai dati pastāv.
9. Izveidojiet lietotāja saskarni
Tagad jums jāpārliecinās, ka jūsu lietotāja saskarne pareizi parāda visus elementus un ka lietotāji var pievienot jaunus uzdevumus, rediģēt esošos un dzēst tos. Pārbaudiet, vai katra darbība attiecīgi atjaunina lietotāja saskarni un vietējo krātuvi.
10. pārbaudiet īstenošanu
Rūpīgi pārbaudiet savu lietojumprogrammu. Pārlādējiet lapu, pievienojiet vai dzēsiet to-dos un pārliecinieties, ka viss darbojas, kā paredzēts. Pēc pārlādēšanas datiem būtu jāparādās tā, kā paredzēts.
Kopsavilkums
Tagad esat iemācījušies, kā izveidot to-do lietotni, kas saglabā savus ierakstus vietējā atmiņā un ielādē tos atkal, pārlādējot lapu. Vietējā krātuve ir vienkāršs un efektīvs veids, kā saglabāt datus klienta pusē. Prasmīgi izmantojot localStorage, jūs varat padarīt savu lietotni ērtāku un tādējādi piedāvāt labāku lietošanas pieredzi.
Biežāk uzdotie jautājumi
Kā saglabāt datus vietējā krātuvē? Datus vietējā krātuvē saglabājat, izmantojot localStorage.setItem('key', 'value').
Kā ielādēt datus no vietējās krātuves? Jūs ielādējat datus, izmantojot localStorage.getItem('key'), un, iespējams, jums būs nepieciešams tos konvertēt ar JSON.parse.
Kas notiek, ja vietējā krātuve ir tukša? Ja vietējā krātuve ir tukša, lai izvairītos no kļūdām, jums jānodrošina, ka jūsu stāvoklis tiek inicializēts ar tukšu masīvu.
Vai es varu izmantot citas datubāzes? Jā, atkarībā no jūsu lietojumprogrammas vajadzībām ir arī citas iespējas, piemēram, IndexedDB vai mākoņrisinājumi.
