$lang['tuto'] = "opplæringsprogrammer"; ?> Lagre JavaScript-objekter i HTML5 localStorage og

Lagre JavaScript-objekter i HTML5 localStorage og sessionStorage

Temp mail SuperHeros
Lagre JavaScript-objekter i HTML5 localStorage og sessionStorage
Lagre JavaScript-objekter i HTML5 localStorage og sessionStorage
Liam Lambert
Torsdag 11. juli 2024 21:30:02

Arbeide med objekter i nettlagring

Når du arbeider med HTML5 localStorage eller sessionStorage, støter utviklere ofte på problemer når de prøver å lagre JavaScript-objekter. I motsetning til primitive datatyper og matriser, ser det ut til at objekter blir konvertert til strenger, noe som kan føre til forvirring og uventede resultater.

Å forstå hvordan du lagrer og henter objekter på riktig måte ved hjelp av nettlagring er avgjørende for mange nettapplikasjoner. Denne veiledningen vil utforske hvorfor objekter konverteres til strenger og gir en enkel løsning for å sikre at objektene dine lagres og hentes på riktig måte.

Kommando Beskrivelse
JSON.stringify() Konverterer et JavaScript-objekt eller en JavaScript-verdi til en JSON-streng, og tillater lagring i localStorage eller sessionStorage.
localStorage.setItem() Lagrer et nøkkelverdi-par i localStorage-objektet, slik at data kan vedvare på tvers av nettleserøkter.
localStorage.getItem() Henter verdien knyttet til en gitt nøkkel fra localStorage.
JSON.parse() Parser en JSON-streng og konverterer den tilbake til et JavaScript-objekt, noe som muliggjør henting av komplekse datastrukturer.
sessionStorage.setItem() Lagrer et nøkkelverdi-par i sessionStorage-objektet, slik at data kan vedvare i varigheten av sideøkten.
sessionStorage.getItem() Henter verdien knyttet til en gitt nøkkel fra sessionStorage.

Effektiv lagring og henting av objekter i nettlagring

I JavaScript, localStorage og sessionStorage er nettlagringsobjekter som lar deg lagre nøkkelverdi-par i nettleseren. Disse lagringsløsningene støtter imidlertid bare strenger, noe som betyr at forsøk på å lagre et JavaScript-objekt direkte vil resultere i at objektet blir konvertert til en strengrepresentasjon som [object Object]. For å lagre objekter effektivt, må du konvertere dem til en JSON-streng ved å bruke JSON.stringify(). Denne metoden tar et JavaScript-objekt og returnerer en JSON-streng, som kan lagres i localStorage eller sessionStorage.

For å hente det lagrede objektet, må du konvertere JSON-strengen tilbake til et JavaScript-objekt ved hjelp av JSON.parse(). Denne metoden tar en JSON-streng og returnerer det tilsvarende JavaScript-objektet. Skriptene i eksemplene ovenfor demonstrerer denne prosessen. Først opprettes et objekt og konverteres til en JSON-streng med JSON.stringify() før den lagres i localStorage ved hjelp av localStorage.setItem(). For å hente objektet hentes JSON-strengen fra localStorage ved hjelp av localStorage.getItem() og deretter analysert tilbake til et JavaScript-objekt ved hjelp av JSON.parse().

Lagre og hente JavaScript-objekter i localStorage

Bruker JavaScript og JSON for 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 }

Lagre og hente JavaScript-objekter i sessionStorage

Bruker JavaScript og JSON for 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 }

Avanserte teknikker for nettlagring

Når du bruker HTML5 localStorage og sessionStorage, trenger utviklere ofte å lagre mer komplekse data enn bare strenger. Mens JSON-serialisering og deserialisering er effektive for grunnleggende objekter, kan mer avanserte scenarier kreve flere hensyn. Hvis du for eksempel jobber med dypt nestede objekter eller objekter som inneholder metoder, trenger du en mer sofistikert tilnærming. En vanlig teknikk er å bruke et bibliotek som f.eks Flatted eller circular-json å håndtere sirkulære referanser og mer komplekse objektstrukturer.

Disse bibliotekene utvider standarden JSON.stringify() og JSON.parse() metoder for å støtte serialisering og deserialisering av objekter med sirkulære referanser, noe som muliggjør en mer robust løsning for lagring av objekter i nettlagring. En annen vurdering er datakomprimering. For store objekter kan du bruke biblioteker som LZ-String for å komprimere dataene før de lagres localStorage eller sessionStorage, reduserer mengden plass som brukes. Dette kan være spesielt nyttig for applikasjoner som trenger å lagre en betydelig mengde data på klientsiden.

Vanlige spørsmål om lagring av objekter i nettlagring

  1. Kan jeg lagre funksjoner i localStorage eller sessionStorage?
  2. Nei, funksjoner kan ikke lagres direkte i nettlagring. Du kan lagre funksjonskoden som en streng og bruke eval() å gjenskape det, men dette anbefales generelt ikke på grunn av sikkerhetsrisikoer.
  3. Hvordan håndterer jeg sirkulære referanser i objekter?
  4. Bruk biblioteker som Flatted eller circular-json som er designet for å håndtere sirkulære referanser i JavaScript-objekter.
  5. Hva er lagringsgrensen for localStorage?
  6. Lagringsgrensen for localStorage er vanligvis rundt 5 MB, men det kan variere mellom nettlesere.
  7. Kan jeg komprimere data før jeg lagrer dem?
  8. Ja, du kan bruke biblioteker som LZ-String for å komprimere dataene dine før du lagrer dem localStorage eller sessionStorage.
  9. Hvordan lagrer jeg en rekke objekter?
  10. Konverter arrayet til en JSON-streng ved å bruke JSON.stringify() før du lagrer den localStorage eller sessionStorage.
  11. Er det sikkert å lagre sensitive data i localStorage?
  12. Nei, det er ikke sikkert å lagre sensitive data i localStorage siden den er tilgjengelig via JavaScript og kan bli kompromittert hvis nettstedet blir angrepet.
  13. Kan jeg bruke localStorage på tvers av forskjellige domener?
  14. Nei, localStorage er begrenset til samme opprinnelse, noe som betyr at den ikke kan nås på tvers av forskjellige domener.
  15. Hva skjer hvis brukeren sletter nettleserdataene sine?
  16. Alle data lagret i localStorage og sessionStorage vil bli fjernet hvis brukeren sletter nettleserdataene sine.

Siste tanker om administrasjon av objektlagring

Effektiv lagring og henting av objekter i HTML5-nettlagring krever konvertering av objekter til JSON-strenger med JSON.stringify() og deretter analysere dem tilbake med JSON.parse(). Denne metoden sikrer at dataene forblir intakte og kan brukes på tvers av ulike nettleserøkter. Ved å forstå og bruke disse teknikkene kan utviklere utnytte localStorage og sessionStorage for mer komplekse databehandlingsoppgaver, og forbedre funksjonaliteten og ytelsen til webapplikasjonene deres.