Stocarea obiectelor JavaScript în localStorage HTML5 și sessionStorage

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, și 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 . 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 sau .

Pentru a prelua obiectul stocat, trebuie să convertiți șirul JSON înapoi într-un obiect JavaScript folosind . 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 înainte de a fi depozitat în folosind localStorage.setItem(). Pentru a prelua obiectul, șirul JSON este preluat de la folosind și apoi analizat înapoi într-un obiect JavaScript folosind .

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

// 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 și , 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 sau circular-json pentru a gestiona referințe circulare și structuri de obiecte mai complexe.

Aceste biblioteci extind standardul și 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 pentru a comprima datele înainte de a le stoca localStorage sau , 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.

1. Pot stoca funcții în? sau ?
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 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 sau care sunt concepute pentru a gestiona referințe circulare în obiectele JavaScript.
5. Pentru ce este limita de stocare ?
6. Limita de stocare pentru 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 pentru a vă comprima datele înainte de a le stoca sau .
9. Cum stochez o serie de obiecte?
10. Convertiți matricea într-un șir JSON folosind înainte de a-l depozita sau .
11. Este sigur să stocați date sensibile în? ?
12. Nu, nu este sigur să stocați date sensibile deoarece este accesibil prin JavaScript și poate fi compromis dacă site-ul este atacat.
13. Pot folosi pe diferite domenii?
14. Nu, 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 și vor fi eliminate dacă utilizatorul își șterge datele browserului.

Stocarea și preluarea eficientă a obiectelor în stocarea web HTML5 necesită conversia obiectelor în șiruri JSON cu și apoi analizându-le înapoi cu . 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.