Stocarea obiectelor JavaScript în localStorage HTML5 și sessionStorage

Stocarea obiectelor JavaScript în localStorage HTML5 și sessionStorage
Stocarea obiectelor JavaScript în localStorage HTML5 și sessionStorage
Liam Lambert
Joi, 11 iulie 2024, 21:39:22

Lucrul cu obiecte din stocarea web

Când lucrează cu HTML5 localStorage sau sessionStorage, dezvoltatorii întâmpină adesea probleme atunci când încearcă să stocheze obiecte JavaScript. Spre deosebire de tipurile și matricele de date primitive, obiectele par a fi convertite în șiruri de caractere, ceea ce poate duce la confuzie și la rezultate neașteptate.

Înțelegerea modului de stocare și preluare corectă a obiectelor utilizând Stocare web este crucială pentru multe aplicații web. Acest ghid va explora de ce obiectele sunt convertite în șiruri și va oferi o soluție simplă pentru a vă asigura că obiectele sunt stocate și recuperate corect.

Comanda Descriere
JSON.stringify() Convertește un obiect sau o valoare JavaScript într-un șir JSON, permițând stocarea în localStorage sau sessionStorage.
localStorage.setItem() Stochează o pereche cheie-valoare în obiectul localStorage, permițând datelor să persistă în sesiunile de browser.
localStorage.getItem() Preia valoarea asociată cu o anumită cheie din localStorage.
JSON.parse() Analizează un șir JSON și îl convertește înapoi într-un obiect JavaScript, permițând regăsirea structurilor complexe de date.
sessionStorage.setItem() Stochează o pereche cheie-valoare în obiectul sessionStorage, permițând datelor să persistă pe durata sesiunii de pagină.
sessionStorage.getItem() Preia valoarea asociată cu o anumită cheie din sessionStorage.

Stocarea și preluarea eficientă a obiectelor în stocarea web

În JavaScript, localStorage și sessionStorage sunt obiecte de stocare web care vă permit să salvați perechi cheie-valoare în browser. Cu toate acestea, aceste soluții de stocare acceptă doar șiruri de caractere, ceea ce înseamnă că încercarea de a stoca direct un obiect JavaScript va duce la convertirea obiectului într-o reprezentare de șir cum ar fi [object Object]. Pentru a stoca obiectele în mod eficient, trebuie să le convertiți într-un șir JSON folosind JSON.stringify(). Această metodă preia un obiect JavaScript și returnează un șir JSON, care poate fi stocat în localStorage sau sessionStorage.

Pentru a prelua obiectul stocat, trebuie să convertiți șirul JSON înapoi într-un obiect JavaScript folosind JSON.parse(). Această metodă ia un șir JSON și returnează obiectul JavaScript corespunzător. Scripturile furnizate în exemplele de mai sus demonstrează acest proces. În primul rând, un obiect este creat și convertit într-un șir JSON cu JSON.stringify() înainte de a fi depozitat în localStorage folosind localStorage.setItem(). Pentru a prelua obiectul, șirul JSON este preluat de la localStorage folosind localStorage.getItem() și apoi analizat înapoi într-un obiect JavaScript folosind JSON.parse().

Stocarea și preluarea obiectelor JavaScript în localStorage

Folosind JavaScript și JSON pentru localStorage

// 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 }

Stocarea și preluarea obiectelor JavaScript în sessionStorage

Folosind JavaScript și JSON pentru sessionStorage

// 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 }

Tehnici avansate de stocare web

Când utilizați HTML5 localStorage și sessionStorage, dezvoltatorii trebuie adesea să stocheze date mai complexe decât doar șiruri. În timp ce serializarea și deserializarea JSON sunt eficiente pentru obiectele de bază, scenariile mai avansate ar putea necesita considerații suplimentare. De exemplu, dacă lucrați cu obiecte profund imbricate sau cu obiecte care conțin metode, aveți nevoie de o abordare mai sofisticată. O tehnică comună este utilizarea unei biblioteci precum Flatted sau circular-json pentru a gestiona referințe circulare și structuri de obiecte mai complexe.

Aceste biblioteci extind standardul JSON.stringify() și JSON.parse() metode de sprijinire a serializării și deserializării obiectelor cu referințe circulare, permițând o soluție mai robustă pentru stocarea obiectelor în stocarea web. Un alt aspect este compresia datelor. Pentru obiecte mari, puteți folosi biblioteci precum LZ-String pentru a comprima datele înainte de a le stoca localStorage sau sessionStorage, reducând spațiul utilizat. Acest lucru poate fi util în special pentru aplicațiile care trebuie să stocheze o cantitate semnificativă de date la nivelul clientului.

Întrebări frecvente despre stocarea obiectelor în stocarea web

  1. Pot stoca funcții în? localStorage sau sessionStorage?
  2. Nu, funcțiile nu pot fi stocate direct în stocarea web. Puteți stoca codul funcției ca șir și îl puteți utiliza eval() pentru a-l recrea, dar acest lucru nu este, în general, recomandat din cauza riscurilor de securitate.
  3. Cum gestionez referințele circulare în obiecte?
  4. Folosiți biblioteci precum Flatted sau circular-json care sunt concepute pentru a gestiona referințe circulare în obiectele JavaScript.
  5. Pentru ce este limita de stocare localStorage?
  6. Limita de stocare pentru localStorage este de obicei în jur de 5 MB, dar poate varia între browsere.
  7. Pot comprima datele înainte de a le stoca?
  8. Da, puteți folosi biblioteci precum LZ-String pentru a vă comprima datele înainte de a le stoca localStorage sau sessionStorage.
  9. Cum stochez o serie de obiecte?
  10. Convertiți matricea într-un șir JSON folosind JSON.stringify() înainte de a-l depozita localStorage sau sessionStorage.
  11. Este sigur să stocați date sensibile în? localStorage?
  12. Nu, nu este sigur să stocați date sensibile localStorage deoarece este accesibil prin JavaScript și poate fi compromis dacă site-ul este atacat.
  13. Pot folosi localStorage pe diferite domenii?
  14. Nu, localStorage este restricționat la aceeași origine, ceea ce înseamnă că nu poate fi accesat în domenii diferite.
  15. Ce se întâmplă dacă utilizatorul își șterge datele browserului?
  16. Toate datele stocate în localStorage și sessionStorage vor fi eliminate dacă utilizatorul își șterge datele browserului.

Gânduri finale despre gestionarea stocării obiectelor

Stocarea și preluarea eficientă a obiectelor în stocarea web HTML5 necesită conversia obiectelor în șiruri JSON cu JSON.stringify() și apoi analizându-le înapoi cu JSON.parse(). Această metodă asigură că datele rămân intacte și utilizabile în diferite sesiuni de browser. Prin înțelegerea și utilizarea acestor tehnici, dezvoltatorii pot folosi localStorage și sessionStorage pentru sarcini mai complexe de gestionare a datelor, îmbunătățind funcționalitatea și performanța aplicațiilor lor web.