Memorizzazione di oggetti JavaScript in HTML5 localStorage e sessionStorage

Memorizzazione di oggetti JavaScript in HTML5 localStorage e sessionStorage
Memorizzazione di oggetti JavaScript in HTML5 localStorage e sessionStorage
Liam Lambert
Giovedì 11 luglio 2024 21:08:25

Lavorare con oggetti in Web Storage

Quando lavorano con HTML5 localStorage o sessionStorage, gli sviluppatori spesso riscontrano problemi quando tentano di archiviare oggetti JavaScript. A differenza dei tipi di dati e degli array primitivi, gli oggetti sembrano essere convertiti in stringhe, il che può portare a confusione e risultati imprevisti.

Comprendere come archiviare e recuperare correttamente gli oggetti utilizzando Web Storage è fondamentale per molte applicazioni web. Questa guida esplorerà il motivo per cui gli oggetti vengono convertiti in stringhe e fornirà una semplice soluzione alternativa per garantire che gli oggetti vengano archiviati e recuperati correttamente.

Comando Descrizione
JSON.stringify() Converte un oggetto o valore JavaScript in una stringa JSON, consentendo l'archiviazione in localStorage o sessionStorage.
localStorage.setItem() Memorizza una coppia chiave-valore nell'oggetto localStorage, consentendo ai dati di persistere tra le sessioni del browser.
localStorage.getItem() Recupera il valore associato a una determinata chiave da localStorage.
JSON.parse() Analizza una stringa JSON e la riconverte in un oggetto JavaScript, consentendo il recupero di strutture dati complesse.
sessionStorage.setItem() Memorizza una coppia chiave-valore nell'oggetto sessionStorage, consentendo ai dati di persistere per tutta la durata della sessione della pagina.
sessionStorage.getItem() Recupera il valore associato a una determinata chiave da sessionStorage.

Memorizzazione e recupero efficaci di oggetti in Web Storage

In JavaScript, localStorage E sessionStorage sono oggetti di archiviazione Web che consentono di salvare coppie chiave-valore nel browser. Tuttavia, queste soluzioni di archiviazione supportano solo stringhe, il che significa che il tentativo di archiviare direttamente un oggetto JavaScript comporterà la conversione dell'oggetto in una rappresentazione di stringa come [object Object]. Per archiviare gli oggetti in modo efficace, è necessario convertirli in una stringa JSON utilizzando JSON.stringify(). Questo metodo accetta un oggetto JavaScript e restituisce una stringa JSON, che può essere archiviata localStorage O sessionStorage.

Per recuperare l'oggetto archiviato, è necessario riconvertire la stringa JSON in un oggetto JavaScript utilizzando JSON.parse(). Questo metodo accetta una stringa JSON e restituisce l'oggetto JavaScript corrispondente. Gli script forniti negli esempi precedenti dimostrano questo processo. Innanzitutto, un oggetto viene creato e convertito in una stringa JSON con JSON.stringify() prima di essere immagazzinato localStorage utilizzando localStorage.setItem(). Per recuperare l'oggetto, viene recuperata la stringa JSON localStorage utilizzando localStorage.getItem() e quindi analizzato nuovamente in un oggetto JavaScript utilizzando JSON.parse().

Memorizzazione e recupero di oggetti JavaScript in localStorage

Utilizzo di JavaScript e JSON per 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 }

Memorizzazione e recupero di oggetti JavaScript in sessionStorage

Utilizzo di JavaScript e JSON per 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 }

Tecniche avanzate per il Web Storage

Quando si utilizza HTML5 localStorage E sessionStorage, gli sviluppatori spesso devono archiviare dati più complessi rispetto alle semplici stringhe. Sebbene la serializzazione e la deserializzazione JSON siano efficaci per gli oggetti di base, gli scenari più avanzati potrebbero richiedere considerazioni aggiuntive. Ad esempio, se lavori con oggetti profondamente annidati o oggetti contenenti metodi, avrai bisogno di un approccio più sofisticato. Una tecnica comune è utilizzare una libreria come Flatted O circular-json per gestire riferimenti circolari e strutture di oggetti più complesse.

Queste librerie estendono lo standard JSON.stringify() E JSON.parse() metodi per supportare la serializzazione e la deserializzazione di oggetti con riferimenti circolari, consentendo una soluzione più solida per l'archiviazione di oggetti nell'archiviazione web. Un'altra considerazione è la compressione dei dati. Per oggetti di grandi dimensioni, puoi utilizzare librerie come LZ-String per comprimere i dati prima di memorizzarli localStorage O sessionStorage, riducendo la quantità di spazio utilizzato. Ciò può essere particolarmente utile per le applicazioni che necessitano di archiviare una quantità significativa di dati lato client.

Domande comuni sulla memorizzazione di oggetti in Web Storage

  1. Posso memorizzare funzioni in localStorage O sessionStorage?
  2. No, le funzioni non possono essere memorizzate direttamente nel web storage. È possibile memorizzare il codice funzione come stringa e utilizzarlo eval() per ricrearlo, ma generalmente non è consigliabile a causa dei rischi per la sicurezza.
  3. Come gestisco i riferimenti circolari negli oggetti?
  4. Usa librerie come Flatted O circular-json che sono progettati per gestire riferimenti circolari negli oggetti JavaScript.
  5. Qual è il limite di archiviazione? localStorage?
  6. Il limite di archiviazione per localStorage è in genere di circa 5 MB, ma può variare a seconda del browser.
  7. Posso comprimere i dati prima di archiviarli?
  8. Sì, puoi utilizzare librerie come LZ-String per comprimere i dati prima di memorizzarli localStorage O sessionStorage.
  9. Come posso memorizzare una serie di oggetti?
  10. Converti l'array in una stringa JSON utilizzando JSON.stringify() prima di riporlo localStorage O sessionStorage.
  11. È sicuro archiviare dati sensibili localStorage?
  12. No, non è sicuro archiviare dati sensibili localStorage poiché è accessibile tramite JavaScript e può essere compromesso se il sito viene attaccato.
  13. Posso usare localStorage in domini diversi?
  14. NO, localStorage è limitato alla stessa origine, il che significa che non è possibile accedervi da domini diversi.
  15. Cosa succede se l'utente cancella i dati del browser?
  16. Tutti i dati memorizzati in localStorage E sessionStorage verranno rimossi se l'utente cancella i dati del browser.

Considerazioni finali sulla gestione dello storage di oggetti

L'archiviazione e il recupero efficaci degli oggetti nello spazio di archiviazione Web HTML5 richiedono la conversione degli oggetti in stringhe JSON con JSON.stringify() e poi analizzarli nuovamente con JSON.parse(). Questo metodo garantisce che i dati rimangano intatti e utilizzabili nelle diverse sessioni del browser. Comprendendo e utilizzando queste tecniche, gli sviluppatori possono sfruttare localStorage e sessionStorage per attività di gestione dei dati più complesse, migliorando la funzionalità e le prestazioni delle loro applicazioni web.