Lagring av JavaScript-objekt i HTML5 localStorage och sessionStorage

Arbeta med objekt i webblagring

När man arbetar med HTML5 localStorage eller sessionStorage stöter utvecklare ofta på problem när de försöker lagra JavaScript-objekt. Till skillnad från primitiva datatyper och arrayer verkar objekt konverteras till strängar, vilket kan leda till förvirring och oväntade resultat.

Att förstå hur man korrekt lagrar och hämtar objekt med hjälp av Web Storage är avgörande för många webbapplikationer. Den här guiden kommer att utforska varför objekt konverteras till strängar och ger en enkel lösning för att säkerställa att dina objekt lagras och hämtas korrekt.

Kommando	Beskrivning
JSON.stringify()	Konverterar ett JavaScript-objekt eller ett JavaScript-värde till en JSON-sträng, vilket möjliggör lagring i localStorage eller sessionStorage.
localStorage.setItem()	Lagrar ett nyckel-värdepar i localStorage-objektet, vilket gör att data kan finnas kvar över webbläsarsessioner.
localStorage.getItem()	Hämtar värdet som är associerat med en given nyckel från localStorage.
JSON.parse()	Analyserar en JSON-sträng och konverterar den tillbaka till ett JavaScript-objekt, vilket möjliggör hämtning av komplexa datastrukturer.
sessionStorage.setItem()	Lagrar ett nyckel-värdepar i sessionStorage-objektet, så att data kan finnas kvar under sidsessionens varaktighet.
sessionStorage.getItem()	Hämtar värdet som är associerat med en given nyckel från sessionStorage.

Effektiv lagring och hämtning av objekt i webblagring

I JavaScript, och är webblagringsobjekt som låter dig spara nyckel-värdepar i webbläsaren. Dessa lagringslösningar stöder dock bara strängar, vilket innebär att försök att lagra ett JavaScript-objekt direkt kommer att resultera i att objektet konverteras till en strängrepresentation som t.ex. . För att lagra objekt effektivt måste du konvertera dem till en JSON-sträng med hjälp av JSON.stringify(). Denna metod tar ett JavaScript-objekt och returnerar en JSON-sträng som kan lagras i eller .

För att hämta det lagrade objektet måste du konvertera JSON-strängen tillbaka till ett JavaScript-objekt med hjälp av . Denna metod tar en JSON-sträng och returnerar motsvarande JavaScript-objekt. Skripten i exemplen ovan visar denna process. Först skapas ett objekt och konverteras till en JSON-sträng med innan den förvaras i använder sig av localStorage.setItem(). För att hämta objektet hämtas JSON-strängen från använder sig av och sedan analyseras tillbaka till ett JavaScript-objekt med hjälp av .

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

Avancerade tekniker för webblagring

När du använder HTML5 och , behöver utvecklare ofta lagra mer komplex data än bara strängar. Även om JSON-serialisering och deserialisering är effektiva för grundläggande objekt, kan mer avancerade scenarier kräva ytterligare överväganden. Om du till exempel arbetar med djupt kapslade objekt eller objekt som innehåller metoder behöver du ett mer sofistikerat tillvägagångssätt. En vanlig teknik är att använda ett bibliotek som t.ex eller circular-json att hantera cirkulära referenser och mer komplexa objektstrukturer.

Dessa bibliotek utökar standarden och metoder för att stödja serialisering och deserialisering av objekt med cirkulära referenser, vilket möjliggör en mer robust lösning för att lagra objekt i webblagring. En annan faktor är datakomprimering. För stora föremål kan du använda bibliotek som för att komprimera data innan du lagrar den localStorage eller , vilket minskar mängden utrymme som används. Detta kan vara särskilt användbart för applikationer som behöver lagra en betydande mängd data på klientsidan.

1. Kan jag lagra funktioner i eller ?
2. Nej, funktioner kan inte lagras direkt i webblagring. Du kan lagra funktionskoden som en sträng och använda för att återskapa det, men detta rekommenderas i allmänhet inte på grund av säkerhetsrisker.
3. Hur hanterar jag cirkulära referenser i objekt?
4. Använd bibliotek som eller som är designade för att hantera cirkulära referenser i JavaScript-objekt.
5. Vad är lagringsgränsen för ?
6. Lagringsgränsen för är vanligtvis runt 5 MB, men det kan variera mellan webbläsare.
7. Kan jag komprimera data innan jag lagrar den?
8. Ja, du kan använda bibliotek som för att komprimera din data innan du lagrar den i eller .
9. Hur lagrar jag en rad objekt?
10. Konvertera arrayen till en JSON-sträng med hjälp av innan du förvarar den eller .
11. Är det säkert att lagra känslig data i ?
12. Nej, det är inte säkert att lagra känslig data i eftersom den är tillgänglig via JavaScript och kan äventyras om webbplatsen attackeras.
13. Kan jag använda över olika domäner?
14. Nej, är begränsad till samma ursprung, vilket innebär att den inte kan nås över olika domäner.
15. Vad händer om användaren rensar sin webbläsardata?
16. All data lagrad i och kommer att tas bort om användaren rensar sin webbläsardata.

Att effektivt lagra och hämta objekt i HTML5-webblagring kräver konvertering av objekt till JSON-strängar med och sedan analysera dem tillbaka med . Denna metod säkerställer att data förblir intakt och användbar över olika webbläsarsessioner. Genom att förstå och använda dessa tekniker kan utvecklare utnyttja localStorage och sessionStorage för mer komplexa datahanteringsuppgifter, vilket förbättrar funktionaliteten och prestandan för sina webbapplikationer.