Pohranjivanje JavaScript objekata u HTML5 localStorage i sessionStorage

Rad s objektima u web pohrani

Kada rade s HTML5 localStorage ili sessionStorage, programeri često nailaze na probleme kada pokušavaju pohraniti JavaScript objekte. Za razliku od primitivnih tipova podataka i nizova, čini se da su objekti pretvoreni u nizove, što može dovesti do zabune i neočekivanih rezultata.

Razumijevanje kako pravilno pohraniti i dohvatiti objekte pomoću web pohrane ključno je za mnoge web aplikacije. Ovaj će vodič istražiti zašto se objekti pretvaraju u nizove i pružiti jednostavno zaobilazno rješenje kako biste osigurali da su vaši objekti ispravno pohranjeni i dohvaćeni.

Naredba	Opis
JSON.stringify()	Pretvara JavaScript objekt ili vrijednost u JSON niz, omogućujući pohranu u localStorage ili sessionStorage.
localStorage.setItem()	Pohranjuje par ključ-vrijednost u objektu localStorage, dopuštajući da podaci traju kroz sesije preglednika.
localStorage.getItem()	Dohvaća vrijednost povezanu s danim ključem iz localStorage.
JSON.parse()	Raščlanjuje JSON niz i pretvara ga natrag u JavaScript objekt, omogućujući dohvaćanje složenih struktura podataka.
sessionStorage.setItem()	Pohranjuje par ključ-vrijednost u objektu sessionStorage, dopuštajući podacima da traju tijekom trajanja sesije stranice.
sessionStorage.getItem()	Dohvaća vrijednost povezanu s danim ključem iz sessionStoragea.

Učinkovito pohranjivanje i dohvaćanje objekata u web pohrani

U JavaScriptu, i su objekti web pohrane koji vam omogućuju spremanje parova ključ-vrijednost u pregledniku. Međutim, ova rješenja za pohranu podržavaju samo nizove, što znači da će pokušaj izravnog pohranjivanja JavaScript objekta rezultirati pretvaranjem objekta u prikaz niza kao što je . Za učinkovito pohranjivanje objekata morate ih pretvoriti u JSON niz pomoću JSON.stringify(). Ova metoda uzima JavaScript objekt i vraća JSON niz u koji se može pohraniti ili .

Da biste dohvatili pohranjeni objekt, morate pretvoriti JSON niz natrag u JavaScript objekt pomoću . Ova metoda uzima JSON niz i vraća odgovarajući JavaScript objekt. Skripte navedene u gornjim primjerima pokazuju ovaj proces. Prvo se stvara objekt i pretvara u JSON niz pomoću prije pohranjivanja u korištenjem localStorage.setItem(). Da bi se dohvatio objekt, JSON niz se dohvaća iz korištenjem a zatim raščlaniti natrag u JavaScript objekt pomoću .

// 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 web pohranu

Kada koristite HTML5 i , programeri često moraju pohraniti složenije podatke od nizova. Iako su JSON serijalizacija i deserijalizacija učinkovite za osnovne objekte, napredniji scenariji mogu zahtijevati dodatna razmatranja. Na primjer, ako radite s duboko ugniježđenim objektima ili objektima koji sadrže metode, potreban vam je sofisticiraniji pristup. Jedna uobičajena tehnika je korištenje knjižnice kao što je ili circular-json za rukovanje kružnim referencama i složenijim objektnim strukturama.

Ove biblioteke proširuju standard i metode za podršku serijalizaciji i deserijalizaciji objekata s kružnim referencama, omogućujući robusnije rješenje za pohranu objekata u web pohranu. Drugo razmatranje je kompresija podataka. Za velike objekte možete koristiti biblioteke poput komprimirati podatke prije pohranjivanja localStorage ili , smanjujući količinu korištenog prostora. Ovo može biti osobito korisno za aplikacije koje trebaju pohraniti značajnu količinu podataka na strani klijenta.

1. Mogu li pohraniti funkcije u ili ?
2. Ne, funkcije se ne mogu pohraniti izravno u web pohranu. Kôd funkcije možete pohraniti kao niz i koristiti ponovno ga izraditi, ali to se općenito ne preporučuje zbog sigurnosnih rizika.
3. Kako mogu rukovati kružnim referencama u objektima?
4. Koristite knjižnice poput ili koji su dizajnirani za rukovanje kružnim referencama u JavaScript objektima.
5. Za što je ograničenje pohrane ?
6. Ograničenje pohrane za obično je oko 5 MB, ali može varirati između preglednika.
7. Mogu li komprimirati podatke prije pohranjivanja?
8. Da, možete koristiti knjižnice poput za komprimiranje vaših podataka prije pohranjivanja ili .
9. Kako mogu pohraniti niz objekata?
10. Pretvorite niz u JSON niz pomoću prije nego što ga spremite u ili .
11. Je li sigurno pohranjivati ​​osjetljive podatke ?
12. Ne, nije sigurno pohranjivati ​​osjetljive podatke budući da je dostupan putem JavaScripta i može biti ugrožen ako web mjesto bude napadnuto.
13. Mogu li koristiti preko različitih domena?
14. Ne, je ograničen na isto podrijetlo, što znači da mu se ne može pristupiti preko različitih domena.
15. Što se događa ako korisnik izbriše podatke preglednika?
16. Svi podaci pohranjeni u i bit će uklonjen ako korisnik izbriše podatke preglednika.

Učinkovito pohranjivanje i dohvaćanje objekata u HTML5 web pohrani zahtijeva pretvaranje objekata u JSON nizove s a zatim ih raščlaniti natrag s . Ova metoda osigurava da podaci ostanu netaknuti i upotrebljivi u različitim sesijama preglednika. Razumijevanjem i korištenjem ovih tehnika, programeri mogu iskoristiti localStorage i sessionStorage za složenije zadatke upravljanja podacima, poboljšavajući funkcionalnost i performanse svojih web aplikacija.