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

JavaScript objektu glabāšana HTML5 lokālajā krātuvē un sessionStorage
JavaScript objektu glabāšana HTML5 lokālajā krātuvē un sessionStorage
Liam Lambert
Ceturtdiena, 2024. gada 11. jūlijs 21:17:56

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, localStorage un sessionStorage 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, [object Object]. 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 localStorage vai sessionStorage.

Lai izgūtu saglabāto objektu, JSON virkne ir jāpārvērš par JavaScript objektu, izmantojot JSON.parse(). Šī 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 JSON.stringify() pirms uzglabāšanas localStorage izmantojot localStorage.setItem(). Lai izgūtu objektu, JSON virkne tiek izgūta no localStorage izmantojot localStorage.getItem() un pēc tam parsēti atpakaļ JavaScript objektā, izmantojot JSON.parse().

JavaScript objektu glabāšana un izgūšana lokālajā krātuvē

Izmantojot JavaScript un JSON vietējai krātuvei

// 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 objektu glabāšana un izguve sesijāStorage

JavaScript un JSON izmantošana sesijas krātuvei

// 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 localStorage un sessionStorage, 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, Flatted vai circular-json lai apstrādātu apļveida atsauces un sarežģītākas objektu struktūras.

Šīs bibliotēkas paplašina standartu JSON.stringify() un JSON.parse() 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ā LZ-String lai saspiestu datus pirms to saglabāšanas localStorage vai sessionStorage, 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.

Bieži uzdotie jautājumi par objektu glabāšanu tīmekļa krātuvē

  1. Vai es varu saglabāt funkcijas localStorage vai sessionStorage?
  2. Nē, funkcijas nevar saglabāt tieši tīmekļa krātuvē. Varat saglabāt funkcijas kodu kā virkni un izmantot eval() 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ā Flatted vai circular-json kas ir paredzēti, lai apstrādātu apļveida atsauces JavaScript objektos.
  5. Kāds ir uzglabāšanas ierobežojums localStorage?
  6. Krātuves ierobežojums localStorage 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ā LZ-String lai saspiestu datus pirms to saglabāšanas localStorage vai sessionStorage.
  9. Kā uzglabāt objektu masīvu?
  10. Konvertējiet masīvu par JSON virkni, izmantojot JSON.stringify() pirms tā uzglabāšanas localStorage vai sessionStorage.
  11. Vai ir droši uzglabāt sensitīvus datus localStorage?
  12. Nē, sensitīvu datu glabāšana nav droša localStorage jo tas ir pieejams, izmantojot JavaScript, un to var apdraudēt, ja vietnei tiek uzbrukts.
  13. Vai es varu izmantot localStorage dažādos domēnos?
  14. Nē, localStorage 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 localStorage un sessionStorage tiks noņemts, ja lietotājs notīrīs pārlūkprogrammas datus.

Pēdējās domas par objektu krātuves pārvaldību

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 JSON.stringify() un pēc tam parsējot tos atpakaļ ar JSON.parse(). Šī 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.