„JavaScript“ objektų saugojimas HTML5 vietinėje saugykloje ir sessionStorage

„JavaScript“ objektų saugojimas HTML5 vietinėje saugykloje ir sessionStorage
„JavaScript“ objektų saugojimas HTML5 vietinėje saugykloje ir sessionStorage
Liam Lambert
2024 m. liepos 11 d., ketvirtadienis 21:20:24

Darbas su objektais žiniatinklio saugykloje

Dirbdami su HTML5 localStorage arba sessionStorage, kūrėjai dažnai susiduria su problemomis bandydami saugoti JavaScript objektus. Skirtingai nuo primityvių duomenų tipų ir masyvų, atrodo, kad objektai konvertuojami į eilutes, o tai gali sukelti painiavą ir netikėtų rezultatų.

Daugeliui žiniatinklio programų labai svarbu suprasti, kaip tinkamai saugoti ir gauti objektus naudojant žiniatinklio saugyklą. Šiame vadove bus nagrinėjama, kodėl objektai konvertuojami į eilutes, ir pateikiamas paprastas sprendimas, kaip užtikrinti, kad objektai būtų tinkamai saugomi ir nuskaityti.

komandą apibūdinimas
JSON.stringify() Konvertuoja „JavaScript“ objektą arba reikšmę į JSON eilutę, leidžiančią saugoti „localStorage“ arba „sessionStorage“.
localStorage.setItem() Išsaugo rakto ir reikšmių porą vietiniame saugojimo objekte, todėl duomenys gali išlikti per naršyklės seansus.
localStorage.getItem() Iš „localStorage“ nuskaito vertę, susietą su nurodytu raktu.
JSON.parse() Išanalizuoja JSON eilutę ir konvertuoja ją atgal į „JavaScript“ objektą, kad būtų galima gauti sudėtingas duomenų struktūras.
sessionStorage.setItem() Išsaugo rakto-reikšmių porą sesijos saugojimo objekte, todėl duomenys gali išlikti visą puslapio seansą.
sessionStorage.getItem() Nuskaito vertę, susietą su duotu raktu iš sessionStorage.

Veiksmingas objektų saugojimas ir atkūrimas žiniatinklio saugykloje

„JavaScript“ localStorage ir sessionStorage yra žiniatinklio saugyklos objektai, leidžiantys išsaugoti raktų ir reikšmių poras naršyklėje. Tačiau šie saugojimo sprendimai palaiko tik eilutes, o tai reiškia, kad bandant tiesiogiai saugoti „JavaScript“ objektą, objektas bus konvertuojamas į eilutės atvaizdavimą, pvz. [object Object]. Norėdami efektyviai saugoti objektus, turite juos konvertuoti į JSON eilutę naudodami JSON.stringify(). Šis metodas paima „JavaScript“ objektą ir grąžina JSON eilutę, kurią galima išsaugoti localStorage arba sessionStorage.

Norėdami nuskaityti saugomą objektą, turite konvertuoti JSON eilutę atgal į JavaScript objektą naudodami JSON.parse(). Šis metodas paima JSON eilutę ir grąžina atitinkamą „JavaScript“ objektą. Aukščiau pateiktuose pavyzdžiuose pateikti scenarijai parodo šį procesą. Pirma, objektas sukuriamas ir konvertuojamas į JSON eilutę su JSON.stringify() prieš laikant localStorage naudojant localStorage.setItem(). Norint gauti objektą, JSON eilutė paimama iš localStorage naudojant localStorage.getItem() o tada išanalizuoti atgal į JavaScript objektą naudojant JSON.parse().

„JavaScript“ objektų saugojimas ir gavimas vietinėje saugykloje

„JavaScript“ ir JSON naudojimas vietinei saugyklai

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in localStorage
localStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from localStorage and convert it back to an object
var retrievedObject = JSON.parse(localStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

„JavaScript“ objektų saugojimas ir gavimas „sessionStorage“.

„JavaScript“ ir JSON naudojimas sesijos saugyklai

// Create an object
var testObject = {'one': 1, 'two': 2, 'three': 3};

// Convert the object to a JSON string and store it in sessionStorage
sessionStorage.setItem('testObject', JSON.stringify(testObject));

// Retrieve the JSON string from sessionStorage and convert it back to an object
var retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));

// Verify the type and value of the retrieved object
console.log('typeof retrievedObject: ' + typeof retrievedObject);
console.log('Value of retrievedObject: ', retrievedObject);

// Output should be:
// typeof retrievedObject: object
// Value of retrievedObject: { one: 1, two: 2, three: 3 }

Pažangūs žiniatinklio saugojimo būdai

Kai naudojate HTML5 localStorage ir sessionStorage, kūrėjams dažnai reikia saugoti sudėtingesnius duomenis nei tik eilutes. Nors JSON serializavimas ir serializavimas yra veiksmingi pagrindiniams objektams, sudėtingesniems scenarijams gali prireikti papildomų svarstymų. Pavyzdžiui, jei dirbate su giliai įdėtais objektais arba objektais, kuriuose yra metodai, jums reikia sudėtingesnio požiūrio. Vienas iš įprastų būdų yra naudoti biblioteką, pvz Flatted arba circular-json tvarkyti žiedines nuorodas ir sudėtingesnes objektų struktūras.

Šios bibliotekos praplečia standartą JSON.stringify() ir JSON.parse() Metodai, skirti palaikyti objektų serializavimą ir deserializavimą su žiedinėmis nuorodomis, įgalinančius patikimesnį objektų saugojimo žiniatinklio saugykloje sprendimą. Kitas aspektas yra duomenų glaudinimas. Dideliems objektams galite naudoti tokias bibliotekas kaip LZ-String suspausti duomenis prieš juos išsaugant localStorage arba sessionStorage, sumažinant naudojamos vietos kiekį. Tai gali būti ypač naudinga programoms, kurioms reikia saugoti daug kliento duomenų.

Dažni klausimai apie objektų saugojimą žiniatinklio saugykloje

  1. Ar galiu išsaugoti funkcijas localStorage arba sessionStorage?
  2. Ne, funkcijos negali būti saugomos tiesiogiai žiniatinklio saugykloje. Funkcijos kodą galite išsaugoti kaip eilutę ir naudoti eval() jį atkurti, tačiau tai paprastai nerekomenduojama dėl saugumo rizikos.
  3. Kaip tvarkyti žiedines nuorodas objektuose?
  4. Naudokite tokias bibliotekas kaip Flatted arba circular-json kurie yra skirti tvarkyti apskritas nuorodas JavaScript objektuose.
  5. Kam skirtas saugojimo limitas localStorage?
  6. Saugojimo limitas, skirtas localStorage paprastai yra apie 5 MB, tačiau įvairiose naršyklėse jis gali skirtis.
  7. Ar galiu suspausti duomenis prieš juos išsaugant?
  8. Taip, galite naudoti tokias bibliotekas kaip LZ-String suspausti duomenis prieš juos išsaugant localStorage arba sessionStorage.
  9. Kaip saugoti objektų masyvą?
  10. Konvertuokite masyvą į JSON eilutę naudodami JSON.stringify() prieš laikant jį localStorage arba sessionStorage.
  11. Ar saugu saugoti neskelbtinus duomenis localStorage?
  12. Ne, nesaugu saugoti neskelbtinus duomenis localStorage nes ji pasiekiama naudojant „JavaScript“ ir gali būti pažeista, jei svetainė bus užpulta.
  13. Ar galiu naudoti localStorage skirtinguose domenuose?
  14. ne, localStorage yra apribotas ta pačia kilme, tai reiškia, kad jo negalima pasiekti skirtinguose domenuose.
  15. Kas atsitiks, jei vartotojas išvalo savo naršyklės duomenis?
  16. Visi duomenys, saugomi localStorage ir sessionStorage bus pašalintas, jei vartotojas išvalys savo naršyklės duomenis.

Paskutinės mintys apie objektų saugyklos valdymą

Norint efektyviai saugoti ir gauti objektus HTML5 žiniatinklio saugykloje, reikia konvertuoti objektus į JSON eilutes naudojant JSON.stringify() o tada išanalizuoti juos atgal su JSON.parse(). Šis metodas užtikrina, kad duomenys išliks nepažeisti ir gali būti naudojami įvairiose naršyklės sesijose. Suprasdami ir naudodami šiuos metodus, kūrėjai gali panaudoti „localStorage“ ir „sessionStorage“ sudėtingesnes duomenų valdymo užduotis, pagerindami savo žiniatinklio programų funkcionalumą ir našumą.