Shranjevanje objektov JavaScript v HTML5 localStorage in sessionStorage

Shranjevanje objektov JavaScript v HTML5 localStorage in sessionStorage
Shranjevanje objektov JavaScript v HTML5 localStorage in sessionStorage
Liam Lambert
četrtek, 11. julij 2024 21:48:50

Delo s predmeti v spletni shrambi

Pri delu s HTML5 localStorage ali sessionStorage razvijalci pogosto naletijo na težave, ko poskušajo shraniti objekte JavaScript. Za razliko od primitivnih podatkovnih vrst in nizov se zdi, da so predmeti pretvorjeni v nize, kar lahko povzroči zmedo in nepričakovane rezultate.

Razumevanje pravilnega shranjevanja in pridobivanja predmetov s spletno shrambo je ključnega pomena za številne spletne aplikacije. Ta vodnik bo raziskal, zakaj se objekti pretvorijo v nize, in ponudil preprosto rešitev za zagotovitev, da so vaši objekti pravilno shranjeni in pridobljeni.

Ukaz Opis
JSON.stringify() Pretvori objekt ali vrednost JavaScript v niz JSON, kar omogoča shranjevanje v localStorage ali sessionStorage.
localStorage.setItem() Shrani par ključ-vrednost v objektu localStorage, kar omogoča, da podatki ostanejo med sejami brskalnika.
localStorage.getItem() Pridobi vrednost, povezano z danim ključem iz localStorage.
JSON.parse() Razčleni niz JSON in ga pretvori nazaj v objekt JavaScript, kar omogoča pridobivanje kompleksnih podatkovnih struktur.
sessionStorage.setItem() Shrani par ključ-vrednost v predmet sessionStorage, kar omogoča, da podatki trajajo v času seje strani.
sessionStorage.getItem() Pridobi vrednost, povezano z danim ključem iz sessionStorage.

Učinkovito shranjevanje in pridobivanje predmetov v spletni shrambi

V JavaScriptu localStorage in sessionStorage so objekti spletnega shranjevanja, ki vam omogočajo shranjevanje parov ključ-vrednost v brskalnik. Vendar te rešitve za shranjevanje podpirajo samo nize, kar pomeni, da bo poskus neposrednega shranjevanja predmeta JavaScript povzročil pretvorbo predmeta v predstavitev niza, kot je [object Object]. Za učinkovito shranjevanje predmetov jih morate pretvoriti v niz JSON z uporabo JSON.stringify(). Ta metoda vzame objekt JavaScript in vrne niz JSON, ki ga je mogoče shraniti localStorage oz sessionStorage.

Če želite pridobiti shranjeni objekt, morate pretvoriti niz JSON nazaj v objekt JavaScript z uporabo JSON.parse(). Ta metoda sprejme niz JSON in vrne ustrezen objekt JavaScript. Skripti v zgornjih primerih prikazujejo ta postopek. Najprej se ustvari objekt in pretvori v niz JSON z JSON.stringify() pred shranjevanjem v localStorage uporabo localStorage.setItem(). Za pridobitev predmeta je niz JSON pridobljen iz localStorage uporabo localStorage.getItem() in nato razčlenjen nazaj v objekt JavaScript z uporabo JSON.parse().

Shranjevanje in pridobivanje objektov JavaScript v localStorage

Uporaba JavaScripta in JSON za 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 }

Shranjevanje in pridobivanje objektov JavaScript v sessionStorage

Uporaba JavaScript in JSON za 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 }

Napredne tehnike za spletno shranjevanje

Pri uporabi HTML5 localStorage in sessionStorage, morajo razvijalci pogosto shraniti bolj zapletene podatke kot le nize. Čeprav sta serializacija in deserializacija JSON učinkoviti za osnovne objekte, lahko naprednejši scenariji zahtevajo dodatne premisleke. Na primer, če delate z globoko ugnezdenimi objekti ali objekti, ki vsebujejo metode, potrebujete bolj prefinjen pristop. Ena pogosta tehnika je uporaba knjižnice, kot je npr Flatted oz circular-json za obravnavo krožnih referenc in kompleksnejših objektnih struktur.

Te knjižnice razširjajo standard JSON.stringify() in JSON.parse() metode za podporo serializacije in deserializacije objektov s krožnimi referencami, kar omogoča robustnejšo rešitev za shranjevanje objektov v spletni shrambi. Drug premislek je stiskanje podatkov. Za velike predmete lahko uporabite knjižnice, kot je LZ-String za stiskanje podatkov, preden jih shranite localStorage oz sessionStorage, kar zmanjša količino uporabljenega prostora. To je lahko še posebej uporabno za aplikacije, ki morajo shraniti veliko količino podatkov na strani odjemalca.

Pogosta vprašanja o shranjevanju predmetov v spletno shrambo

  1. Ali lahko shranim funkcije v localStorage oz sessionStorage?
  2. Ne, funkcij ni mogoče shraniti neposredno v spletno shrambo. Funkcijsko kodo lahko shranite kot niz in uporabite eval() da ga ponovno ustvarite, vendar to na splošno ni priporočljivo zaradi varnostnih tveganj.
  3. Kako ravnam s krožnimi sklici v objektih?
  4. Uporabite knjižnice, kot je Flatted oz circular-json ki so zasnovani za obdelavo krožnih referenc v objektih JavaScript.
  5. Za kaj je omejitev prostora za shranjevanje localStorage?
  6. Omejitev shranjevanja za localStorage je običajno okoli 5 MB, vendar se lahko razlikuje med brskalniki.
  7. Ali lahko stisnem podatke, preden jih shranim?
  8. Da, lahko uporabite knjižnice, kot je LZ-String za stiskanje vaših podatkov, preden jih shranite localStorage oz sessionStorage.
  9. Kako shranim niz predmetov?
  10. Pretvorite matriko v niz JSON z uporabo JSON.stringify() preden ga shranite localStorage oz sessionStorage.
  11. Ali je shranjevanje občutljivih podatkov varno localStorage?
  12. Ne, shranjevanje občutljivih podatkov ni varno localStorage saj je dostopen prek JavaScripta in je lahko ogrožen, če je spletno mesto napadeno.
  13. Ali lahko uporabim localStorage na različnih domenah?
  14. ne, localStorage je omejen na isti izvor, kar pomeni, da do njega ni mogoče dostopati prek različnih domen.
  15. Kaj se zgodi, če uporabnik izbriše podatke brskalnika?
  16. Vsi podatki, shranjeni v localStorage in sessionStorage bo odstranjen, če uporabnik izbriše podatke brskalnika.

Končne misli o upravljanju shranjevanja objektov

Učinkovito shranjevanje in pridobivanje predmetov v spletni shrambi HTML5 zahteva pretvorbo predmetov v nize JSON z JSON.stringify() in jih nato razčleniti nazaj z JSON.parse(). Ta metoda zagotavlja, da podatki ostanejo nedotaknjeni in uporabni v različnih sejah brskalnika. Z razumevanjem in uporabo teh tehnik lahko razvijalci izkoristijo localStorage in sessionStorage za bolj zapletene naloge upravljanja podatkov, s čimer izboljšajo funkcionalnost in zmogljivost svojih spletnih aplikacij.