Shranjevanje objektov JavaScript v HTML5 localStorage in sessionStorage

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 in 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 . 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 oz .

Če želite pridobiti shranjeni objekt, morate pretvoriti niz JSON nazaj v objekt JavaScript z uporabo . 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 pred shranjevanjem v uporabo localStorage.setItem(). Za pridobitev predmeta je niz JSON pridobljen iz uporabo in nato razčlenjen nazaj v objekt JavaScript z uporabo .

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

Napredne tehnike za spletno shranjevanje

Pri uporabi HTML5 in , 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 oz circular-json za obravnavo krožnih referenc in kompleksnejših objektnih struktur.

Te knjižnice razširjajo standard in 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 za stiskanje podatkov, preden jih shranite localStorage oz , 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.

1. Ali lahko shranim funkcije v oz ?
2. Ne, funkcij ni mogoče shraniti neposredno v spletno shrambo. Funkcijsko kodo lahko shranite kot niz in uporabite 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 oz ki so zasnovani za obdelavo krožnih referenc v objektih JavaScript.
5. Za kaj je omejitev prostora za shranjevanje ?
6. Omejitev shranjevanja za 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 za stiskanje vaših podatkov, preden jih shranite oz .
9. Kako shranim niz predmetov?
10. Pretvorite matriko v niz JSON z uporabo preden ga shranite oz .
11. Ali je shranjevanje občutljivih podatkov varno ?
12. Ne, shranjevanje občutljivih podatkov ni varno saj je dostopen prek JavaScripta in je lahko ogrožen, če je spletno mesto napadeno.
13. Ali lahko uporabim na različnih domenah?
14. ne, 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 in bo odstranjen, če uporabnik izbriše podatke brskalnika.

Učinkovito shranjevanje in pridobivanje predmetov v spletni shrambi HTML5 zahteva pretvorbo predmetov v nize JSON z in jih nato razčleniti nazaj z . 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.