Emmagatzematge d'objectes JavaScript en HTML5 localStorage i sessionStorage

Emmagatzematge d'objectes JavaScript en HTML5 localStorage i sessionStorage
Emmagatzematge d'objectes JavaScript en HTML5 localStorage i sessionStorage
Liam Lambert
Dijous, 11 de juliol de 2024 a les 20:34:58

Treballar amb objectes a l'emmagatzematge web

Quan treballen amb HTML5 localStorage o sessionStorage, els desenvolupadors sovint es troben amb problemes quan intenten emmagatzemar objectes JavaScript. A diferència dels tipus i matrius de dades primitius, els objectes semblen convertir-se en cadenes, cosa que pot provocar confusió i resultats inesperats.

Entendre com emmagatzemar i recuperar objectes correctament mitjançant l'emmagatzematge web és crucial per a moltes aplicacions web. Aquesta guia explorarà per què els objectes es converteixen en cadenes i proporcionarà una solució senzilla per garantir que els vostres objectes s'emmagatzemen i es recuperin correctament.

Comandament Descripció
JSON.stringify() Converteix un objecte o valor de JavaScript en una cadena JSON, permetent l'emmagatzematge a localStorage o sessionStorage.
localStorage.setItem() Emmagatzema un parell clau-valor a l'objecte localStorage, cosa que permet que les dades es mantinguin entre les sessions del navegador.
localStorage.getItem() Recupera el valor associat a una clau determinada de localStorage.
JSON.parse() Analitza una cadena JSON i la torna a convertir en un objecte JavaScript, permetent la recuperació d'estructures de dades complexes.
sessionStorage.setItem() Emmagatzema un parell clau-valor a l'objecte sessionStorage, cosa que permet que les dades persisteixin durant la sessió de la pàgina.
sessionStorage.getItem() Recupera el valor associat a una clau determinada de sessionStorage.

Emmagatzematge i recuperació eficaç d'objectes a l'emmagatzematge web

En JavaScript, localStorage i sessionStorage són objectes d'emmagatzematge web que us permeten desar parells clau-valor al navegador. Tanmateix, aquestes solucions d'emmagatzematge només admeten cadenes, la qual cosa significa que intentar emmagatzemar un objecte JavaScript directament farà que l'objecte es converteixi en una representació de cadena com ara [object Object]. Per emmagatzemar objectes de manera eficaç, heu de convertir-los en una cadena JSON utilitzant JSON.stringify(). Aquest mètode pren un objecte JavaScript i retorna una cadena JSON, que es pot emmagatzemar localStorage o sessionStorage.

Per recuperar l'objecte emmagatzemat, heu de tornar a convertir la cadena JSON en un objecte JavaScript mitjançant JSON.parse(). Aquest mètode pren una cadena JSON i retorna l'objecte JavaScript corresponent. Els scripts que es proporcionen als exemples anteriors mostren aquest procés. Primer, es crea un objecte i es converteix en una cadena JSON amb JSON.stringify() abans de ser emmagatzemat localStorage utilitzant localStorage.setItem(). Per recuperar l'objecte, s'obté la cadena JSON de localStorage utilitzant localStorage.getItem() i després es torna a analitzar en un objecte JavaScript utilitzant JSON.parse().

Emmagatzematge i recuperació d'objectes JavaScript a localStorage

Utilitzant JavaScript i JSON per a 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 }

Emmagatzematge i recuperació d'objectes JavaScript a sessionStorage

Utilitzant JavaScript i JSON per a 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 }

Tècniques avançades d'emmagatzematge web

Quan utilitzeu HTML5 localStorage i sessionStorage, els desenvolupadors sovint necessiten emmagatzemar dades més complexes que només cadenes. Tot i que la serialització i la deserialització JSON són efectives per als objectes bàsics, els escenaris més avançats poden requerir consideracions addicionals. Per exemple, si treballeu amb objectes profundament imbricats o amb objectes que contenen mètodes, necessiteu un enfocament més sofisticat. Una tècnica habitual és utilitzar una biblioteca com ara Flatted o circular-json per manejar referències circulars i estructures d'objectes més complexes.

Aquestes biblioteques amplien l'estàndard JSON.stringify() i JSON.parse() mètodes per donar suport a la serialització i deserialització d'objectes amb referències circulars, que permeten una solució més robusta per emmagatzemar objectes a l'emmagatzematge web. Una altra consideració és la compressió de dades. Per a objectes grans, podeu utilitzar biblioteques com LZ-String per comprimir les dades abans d'emmagatzemar-les localStorage o sessionStorage, reduint la quantitat d'espai utilitzat. Això pot ser especialment útil per a aplicacions que necessiten emmagatzemar una quantitat important de dades del costat del client.

Preguntes habituals sobre l'emmagatzematge d'objectes a l'emmagatzematge web

  1. Puc emmagatzemar funcions localStorage o sessionStorage?
  2. No, les funcions no es poden emmagatzemar directament a l'emmagatzematge web. Podeu emmagatzemar el codi de funció com a cadena i utilitzar-lo eval() per recrear-lo, però generalment no es recomana a causa dels riscos de seguretat.
  3. Com puc gestionar les referències circulars als objectes?
  4. Utilitzeu biblioteques com Flatted o circular-json que estan dissenyats per gestionar referències circulars en objectes JavaScript.
  5. Per a què serveix el límit d'emmagatzematge localStorage?
  6. El límit d'emmagatzematge per localStorage normalment és d'uns 5 MB, però pot variar entre navegadors.
  7. Puc comprimir dades abans d'emmagatzemar-les?
  8. Sí, podeu utilitzar biblioteques com LZ-String per comprimir les vostres dades abans d'emmagatzemar-les localStorage o sessionStorage.
  9. Com emmagatzemar una matriu d'objectes?
  10. Converteix la matriu en una cadena JSON utilitzant JSON.stringify() abans d'emmagatzemar-lo localStorage o sessionStorage.
  11. És segur emmagatzemar dades sensibles? localStorage?
  12. No, no és segur emmagatzemar dades sensibles localStorage ja que és accessible mitjançant JavaScript i es pot comprometre si el lloc és atacat.
  13. Puc utilitzar localStorage en diferents dominis?
  14. No, localStorage està restringit al mateix origen, és a dir, no es pot accedir a diferents dominis.
  15. Què passa si l'usuari esborra les dades del seu navegador?
  16. Totes les dades emmagatzemades a localStorage i sessionStorage s'eliminarà si l'usuari esborra les dades del seu navegador.

Consideracions finals sobre la gestió de l'emmagatzematge d'objectes

L'emmagatzematge i la recuperació eficaços d'objectes a l'emmagatzematge web HTML5 requereix la conversió d'objectes a cadenes JSON amb JSON.stringify() i després tornar-los a analitzar amb JSON.parse(). Aquest mètode garanteix que les dades romanguin intactes i es puguin utilitzar en diferents sessions del navegador. En comprendre i utilitzar aquestes tècniques, els desenvolupadors poden aprofitar localStorage i sessionStorage per a tasques de gestió de dades més complexes, millorant la funcionalitat i el rendiment de les seves aplicacions web.