Lagring av JavaScript-objekt i HTML5 localStorage och sessionStorage

Lagring av JavaScript-objekt i HTML5 localStorage och sessionStorage
Lagring av JavaScript-objekt i HTML5 localStorage och sessionStorage
Liam Lambert
Torsdag 11 juli 2024 21:51:19

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, localStorage och sessionStorage ä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. [object Object]. 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 localStorage eller sessionStorage.

För att hämta det lagrade objektet måste du konvertera JSON-strängen tillbaka till ett JavaScript-objekt med hjälp av JSON.parse(). 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 JSON.stringify() innan den förvaras i localStorage använder sig av localStorage.setItem(). För att hämta objektet hämtas JSON-strängen från localStorage använder sig av localStorage.getItem() och sedan analyseras tillbaka till ett JavaScript-objekt med hjälp av JSON.parse().

Lagra och hämta JavaScript-objekt i localStorage

Använder JavaScript och JSON för 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 }

Lagra och hämta JavaScript-objekt i sessionStorage

Använder JavaScript och JSON för 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 }

Avancerade tekniker för webblagring

När du använder HTML5 localStorage och sessionStorage, 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 Flatted eller circular-json att hantera cirkulära referenser och mer komplexa objektstrukturer.

Dessa bibliotek utökar standarden JSON.stringify() och JSON.parse() 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 LZ-String för att komprimera data innan du lagrar den localStorage eller sessionStorage, 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.

Vanliga frågor om att lagra objekt i webblagring

  1. Kan jag lagra funktioner i localStorage eller sessionStorage?
  2. Nej, funktioner kan inte lagras direkt i webblagring. Du kan lagra funktionskoden som en sträng och använda eval() 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 Flatted eller circular-json som är designade för att hantera cirkulära referenser i JavaScript-objekt.
  5. Vad är lagringsgränsen för localStorage?
  6. Lagringsgränsen för localStorage ä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 LZ-String för att komprimera din data innan du lagrar den i localStorage eller sessionStorage.
  9. Hur lagrar jag en rad objekt?
  10. Konvertera arrayen till en JSON-sträng med hjälp av JSON.stringify() innan du förvarar den localStorage eller sessionStorage.
  11. Är det säkert att lagra känslig data i localStorage?
  12. Nej, det är inte säkert att lagra känslig data i localStorage eftersom den är tillgänglig via JavaScript och kan äventyras om webbplatsen attackeras.
  13. Kan jag använda localStorage över olika domäner?
  14. Nej, localStorage ä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 localStorage och sessionStorage kommer att tas bort om användaren rensar sin webbläsardata.

Slutliga tankar om hantering av objektlagring

Att effektivt lagra och hämta objekt i HTML5-webblagring kräver konvertering av objekt till JSON-strängar med JSON.stringify() och sedan analysera dem tillbaka med JSON.parse(). 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.