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, og 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 . 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 eller .
For å hente det lagrede objektet, må du konvertere JSON-strengen tilbake til et JavaScript-objekt ved hjelp av . 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 før den lagres i ved hjelp av localStorage.setItem(). For å hente objektet hentes JSON-strengen fra ved hjelp av og deretter analysert tilbake til et JavaScript-objekt ved hjelp av .
Lagre og hente JavaScript-objekter i localStorage
Bruker JavaScript og JSON for localStorage
// Create an objectvar testObject = {'one': 1, 'two': 2, 'three': 3};// Convert the object to a JSON string and store it in localStoragelocalStorage.setItem('testObject', JSON.stringify(testObject));// Retrieve the JSON string from localStorage and convert it back to an objectvar retrievedObject = JSON.parse(localStorage.getItem('testObject'));// Verify the type and value of the retrieved objectconsole.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 objectvar testObject = {'one': 1, 'two': 2, 'three': 3};// Convert the object to a JSON string and store it in sessionStoragesessionStorage.setItem('testObject', JSON.stringify(testObject));// Retrieve the JSON string from sessionStorage and convert it back to an objectvar retrievedObject = JSON.parse(sessionStorage.getItem('testObject'));// Verify the type and value of the retrieved objectconsole.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 og , 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 eller circular-json å håndtere sirkulære referanser og mer komplekse objektstrukturer.
Disse bibliotekene utvider standarden og 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 for å komprimere dataene før de lagres localStorage eller , reduserer mengden plass som brukes. Dette kan være spesielt nyttig for applikasjoner som trenger å lagre en betydelig mengde data på klientsiden.
- Kan jeg lagre funksjoner i eller ?
- Nei, funksjoner kan ikke lagres direkte i nettlagring. Du kan lagre funksjonskoden som en streng og bruke å gjenskape det, men dette anbefales generelt ikke på grunn av sikkerhetsrisikoer.
- Hvordan håndterer jeg sirkulære referanser i objekter?
- Bruk biblioteker som eller som er designet for å håndtere sirkulære referanser i JavaScript-objekter.
- Hva er lagringsgrensen for ?
- Lagringsgrensen for er vanligvis rundt 5 MB, men det kan variere mellom nettlesere.
- Kan jeg komprimere data før jeg lagrer dem?
- Ja, du kan bruke biblioteker som for å komprimere dataene dine før du lagrer dem eller .
- Hvordan lagrer jeg en rekke objekter?
- Konverter arrayet til en JSON-streng ved å bruke før du lagrer den eller .
- Er det sikkert å lagre sensitive data i ?
- Nei, det er ikke sikkert å lagre sensitive data i siden den er tilgjengelig via JavaScript og kan bli kompromittert hvis nettstedet blir angrepet.
- Kan jeg bruke på tvers av forskjellige domener?
- Nei, er begrenset til samme opprinnelse, noe som betyr at den ikke kan nås på tvers av forskjellige domener.
- Hva skjer hvis brukeren sletter nettleserdataene sine?
- Alle data lagret i og vil bli fjernet hvis brukeren sletter nettleserdataene sine.
Effektiv lagring og henting av objekter i HTML5-nettlagring krever konvertering av objekter til JSON-strenger med og deretter analysere dem tilbake med . 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.