JavaScript objektu glabāšana HTML5 lokālajā krātuvē un sessionStorage

Darbs ar objektiem tīmekļa krātuvē

Strādājot ar HTML5 localStorage vai sessionStorage, izstrādātāji bieži saskaras ar problēmām, mēģinot saglabāt JavaScript objektus. Atšķirībā no primitīviem datu tipiem un masīviem, šķiet, ka objekti tiek pārveidoti par virknēm, kas var radīt neskaidrības un negaidītus rezultātus.

Daudzām tīmekļa lietojumprogrammām ir ļoti svarīgi saprast, kā pareizi uzglabāt un izgūt objektus, izmantojot tīmekļa krātuvi. Šajā rokasgrāmatā tiks pētīts, kāpēc objekti tiek pārveidoti par virknēm, un sniegts vienkāršs risinājums, lai nodrošinātu, ka objekti tiek pareizi saglabāti un izgūti.

Komanda	Apraksts
JSON.stringify()	Pārvērš JavaScript objektu vai vērtību par JSON virkni, ļaujot to uzglabāt lokālajā krātuvē vai sessionStorage.
localStorage.setItem()	Saglabā atslēgas vērtību pāri lokālajā krātuves objektā, ļaujot datiem saglabāties pārlūkprogrammas sesijās.
localStorage.getItem()	Izgūst ar doto atslēgu saistīto vērtību no vietējās krātuves.
JSON.parse()	Parsē JSON virkni un pārvērš to atpakaļ par JavaScript objektu, ļaujot izgūt sarežģītas datu struktūras.
sessionStorage.setItem()	Saglabā atslēgas vērtību pāri sessionStorage objektā, ļaujot datiem saglabāties lapas sesijas laikā.
sessionStorage.getItem()	Izgūst ar doto atslēgu saistīto vērtību no sessionStorage.

Efektīva objektu glabāšana un izguve tīmekļa krātuvē

JavaScript, un ir tīmekļa krātuves objekti, kas ļauj pārlūkprogrammā saglabāt atslēgu un vērtību pārus. Tomēr šie uzglabāšanas risinājumi atbalsta tikai virknes, kas nozīmē, ka mēģinot tieši saglabāt JavaScript objektu, objekts tiks pārveidots par virknes attēlojumu, piemēram, . Lai efektīvi uzglabātu objektus, tie ir jāpārvērš par JSON virkni, izmantojot JSON.stringify(). Šī metode izmanto JavaScript objektu un atgriež JSON virkni, kuru var saglabāt vai .

Lai izgūtu saglabāto objektu, JSON virkne ir jāpārvērš par JavaScript objektu, izmantojot . Šī metode izmanto JSON virkni un atgriež atbilstošo JavaScript objektu. Iepriekš minētajos piemēros sniegtie skripti parāda šo procesu. Pirmkārt, objekts tiek izveidots un pārveidots par JSON virkni ar pirms uzglabāšanas izmantojot localStorage.setItem(). Lai izgūtu objektu, JSON virkne tiek izgūta no izmantojot un pēc tam parsēti atpakaļ JavaScript objektā, izmantojot .

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

Uzlabotas metodes tīmekļa krātuvei

Lietojot HTML5 un , izstrādātājiem bieži ir jāuzglabā sarežģītāki dati, nevis tikai virknes. Lai gan JSON serializācija un deserializācija ir efektīva pamata objektiem, sarežģītākiem scenārijiem var būt nepieciešami papildu apsvērumi. Piemēram, ja strādājat ar dziļi ligzdotiem objektiem vai objektiem, kas satur metodes, jums ir nepieciešama sarežģītāka pieeja. Viens izplatīts paņēmiens ir izmantot bibliotēku, piemēram, vai circular-json lai apstrādātu apļveida atsauces un sarežģītākas objektu struktūras.

Šīs bibliotēkas paplašina standartu un metodes, lai atbalstītu objektu serializāciju un deserializāciju ar apļveida atsaucēm, nodrošinot izturīgāku risinājumu objektu glabāšanai tīmekļa krātuvē. Vēl viens apsvērums ir datu saspiešana. Lieliem objektiem varat izmantot tādas bibliotēkas kā lai saspiestu datus pirms to saglabāšanas localStorage vai , samazinot izmantotās vietas daudzumu. Tas var būt īpaši noderīgi lietojumprogrammām, kurām nepieciešams saglabāt ievērojamu daudzumu klienta puses datu.

1. Vai es varu saglabāt funkcijas vai ?
2. Nē, funkcijas nevar saglabāt tieši tīmekļa krātuvē. Varat saglabāt funkcijas kodu kā virkni un izmantot lai to izveidotu no jauna, taču tas parasti nav ieteicams drošības risku dēļ.
3. Kā rīkoties ar apļveida atsaucēm objektos?
4. Izmantojiet tādas bibliotēkas kā vai kas ir paredzēti, lai apstrādātu apļveida atsauces JavaScript objektos.
5. Kāds ir uzglabāšanas ierobežojums ?
6. Krātuves ierobežojums parasti ir aptuveni 5 MB, taču dažādās pārlūkprogrammās tas var atšķirties.
7. Vai varu saspiest datus pirms to saglabāšanas?
8. Jā, jūs varat izmantot tādas bibliotēkas kā lai saspiestu datus pirms to saglabāšanas vai .
9. Kā uzglabāt objektu masīvu?
10. Konvertējiet masīvu par JSON virkni, izmantojot pirms tā uzglabāšanas vai .
11. Vai ir droši uzglabāt sensitīvus datus ?
12. Nē, sensitīvu datu glabāšana nav droša jo tas ir pieejams, izmantojot JavaScript, un to var apdraudēt, ja vietnei tiek uzbrukts.
13. Vai es varu izmantot dažādos domēnos?
14. Nē, ir ierobežots ar vienu un to pašu izcelsmi, kas nozīmē, ka tai nevar piekļūt dažādos domēnos.
15. Kas notiek, ja lietotājs notīra pārlūkprogrammas datus?
16. Visi dati, kas saglabāti un tiks noņemts, ja lietotājs notīrīs pārlūkprogrammas datus.

Lai efektīvi uzglabātu un izgūtu objektus HTML5 tīmekļa krātuvē, objekti ir jāpārveido par JSON virknēm, izmantojot un pēc tam parsējot tos atpakaļ ar . Šī metode nodrošina, ka dati paliek neskarti un izmantojami dažādās pārlūkprogrammas sesijās. Izprotot un izmantojot šīs metodes, izstrādātāji var izmantot localStorage un sessionStorage sarežģītākiem datu pārvaldības uzdevumiem, uzlabojot savu tīmekļa lietojumprogrammu funkcionalitāti un veiktspēju.