Lagring af JavaScript-objekter i HTML5 localStorage og sessionStorage

Lagring af JavaScript-objekter i HTML5 localStorage og sessionStorage
Lagring af JavaScript-objekter i HTML5 localStorage og sessionStorage
Liam Lambert
Torsdag den 11. juli 2024 kl. 20.44.23

Arbejde med objekter i Web Storage

Når man arbejder med HTML5 localStorage eller sessionStorage, støder udviklere ofte på problemer, når de forsøger at gemme JavaScript-objekter. I modsætning til primitive datatyper og arrays ser objekter ud til at blive konverteret til strenge, hvilket kan føre til forvirring og uventede resultater.

At forstå, hvordan man korrekt gemmer og henter objekter ved hjælp af Web Storage er afgørende for mange webapplikationer. Denne vejledning vil undersøge, hvorfor objekter konverteres til strenge, og giver en enkel løsning for at sikre, at dine objekter gemmes og hentes korrekt.

Kommando Beskrivelse
JSON.stringify() Konverterer et JavaScript-objekt eller en JavaScript-værdi til en JSON-streng, hvilket giver mulighed for lagring i localStorage eller sessionStorage.
localStorage.setItem() Gemmer et nøgle-værdi-par i localStorage-objektet, så data kan bevares på tværs af browsersessioner.
localStorage.getItem() Henter værdien forbundet med en given nøgle fra localStorage.
JSON.parse() Parser en JSON-streng og konverterer den tilbage til et JavaScript-objekt, hvilket muliggør hentning af komplekse datastrukturer.
sessionStorage.setItem() Gemmer et nøgle-værdi-par i sessionStorage-objektet, hvilket tillader data at forblive i varigheden af ​​sidesessionen.
sessionStorage.getItem() Henter værdien forbundet med en given nøgle fra sessionStorage.

Effektiv lagring og hentning af objekter i Web Storage

I JavaScript, localStorage og sessionStorage er weblagringsobjekter, der giver dig mulighed for at gemme nøgleværdi-par i browseren. Disse lagringsløsninger understøtter dog kun strenge, hvilket betyder, at forsøg på at gemme et JavaScript-objekt direkte vil resultere i, at objektet konverteres til en strengrepræsentation som f.eks. [object Object]. For at gemme objekter effektivt skal du konvertere dem til en JSON-streng ved hjælp af JSON.stringify(). Denne metode tager et JavaScript-objekt og returnerer en JSON-streng, som kan gemmes i localStorage eller sessionStorage.

For at hente det lagrede objekt skal du konvertere JSON-strengen tilbage til et JavaScript-objekt ved hjælp af JSON.parse(). Denne metode tager en JSON-streng og returnerer det tilsvarende JavaScript-objekt. Scripts i eksemplerne ovenfor demonstrerer denne proces. Først oprettes et objekt og konverteres til en JSON-streng med JSON.stringify() før de opbevares i localStorage ved brug af localStorage.setItem(). For at hente objektet hentes JSON-strengen fra localStorage ved brug af localStorage.getItem() og derefter parset tilbage til et JavaScript-objekt ved hjælp af JSON.parse().

Lagring og hentning af JavaScript-objekter i localStorage

Brug af JavaScript og JSON til 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 }

Lagring og hentning af JavaScript-objekter i sessionStorage

Brug af JavaScript og JSON til 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 }

Avancerede teknikker til weblagring

Når du bruger HTML5 localStorage og sessionStorage, skal udviklere ofte gemme mere komplekse data end blot strenge. Mens JSON-serialisering og deserialisering er effektive for grundlæggende objekter, kan mere avancerede scenarier kræve yderligere overvejelser. Hvis du for eksempel arbejder med dybt indlejrede objekter eller objekter, der indeholder metoder, har du brug for en mere sofistikeret tilgang. En almindelig teknik er at bruge et bibliotek som f.eks Flatted eller circular-json at håndtere cirkulære referencer og mere komplekse objektstrukturer.

Disse biblioteker udvider standarden JSON.stringify() og JSON.parse() metoder til at understøtte serialisering og deserialisering af objekter med cirkulære referencer, hvilket muliggør en mere robust løsning til lagring af objekter i weblagring. En anden overvejelse er datakomprimering. Til store genstande kan du bruge biblioteker som f.eks LZ-String at komprimere dataene, før de gemmes i localStorage eller sessionStorage, hvilket reducerer mængden af ​​brugt plads. Dette kan være særligt nyttigt for applikationer, der skal gemme en betydelig mængde data på klientsiden.

Almindelige spørgsmål om lagring af objekter i weblager

  1. Kan jeg gemme funktioner i localStorage eller sessionStorage?
  2. Nej, funktioner kan ikke gemmes direkte i weblageret. Du kan gemme funktionskoden som en streng og bruge eval() at genskabe det, men dette anbefales generelt ikke på grund af sikkerhedsrisici.
  3. Hvordan håndterer jeg cirkulære referencer i objekter?
  4. Brug biblioteker som Flatted eller circular-json som er designet til at håndtere cirkulære referencer i JavaScript-objekter.
  5. Hvad er lagergrænsen for localStorage?
  6. Lagergrænsen for localStorage er typisk omkring 5MB, men det kan variere mellem browsere.
  7. Kan jeg komprimere data, før jeg gemmer dem?
  8. Ja, du kan bruge biblioteker som f.eks LZ-String at komprimere dine data, før du gemmer dem i localStorage eller sessionStorage.
  9. Hvordan gemmer jeg en række objekter?
  10. Konverter arrayet til en JSON-streng ved hjælp af JSON.stringify() før du opbevarer det localStorage eller sessionStorage.
  11. Er det sikkert at opbevare følsomme data i localStorage?
  12. Nej, det er ikke sikkert at gemme følsomme data i localStorage da det er tilgængeligt via JavaScript og kan blive kompromitteret, hvis webstedet angribes.
  13. Kan jeg bruge localStorage på tværs af forskellige domæner?
  14. Ingen, localStorage er begrænset til den samme oprindelse, hvilket betyder, at den ikke kan tilgås på tværs af forskellige domæner.
  15. Hvad sker der, hvis brugeren rydder deres browserdata?
  16. Alle data gemt i localStorage og sessionStorage vil blive fjernet, hvis brugeren rydder deres browserdata.

Endelige tanker om håndtering af objektlagring

Effektiv lagring og hentning af objekter i HTML5-weblagring kræver konvertering af objekter til JSON-strenge med JSON.stringify() og derefter analysere dem tilbage med JSON.parse(). Denne metode sikrer, at dataene forbliver intakte og brugbare på tværs af forskellige browsersessioner. Ved at forstå og bruge disse teknikker kan udviklere udnytte localStorage og sessionStorage til mere komplekse datahåndteringsopgaver, hvilket forbedrer funktionaliteten og ydeevnen af ​​deres webapplikationer.