Memorizzazione di oggetti JavaScript in HTML5 localStorage e sessionStorage

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, E 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 . 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 O .

Per recuperare l'oggetto archiviato, è necessario riconvertire la stringa JSON in un oggetto JavaScript utilizzando . 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 prima di essere immagazzinato utilizzando localStorage.setItem(). Per recuperare l'oggetto, viene recuperata la stringa JSON utilizzando e quindi analizzato nuovamente in un oggetto JavaScript utilizzando .

// 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 }

// 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 E , 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 O circular-json per gestire riferimenti circolari e strutture di oggetti più complesse.

Queste librerie estendono lo standard E 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 per comprimere i dati prima di memorizzarli localStorage O , 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.

1. Posso memorizzare funzioni in O ?
2. No, le funzioni non possono essere memorizzate direttamente nel web storage. È possibile memorizzare il codice funzione come stringa e utilizzarlo 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 O che sono progettati per gestire riferimenti circolari negli oggetti JavaScript.
5. Qual è il limite di archiviazione? ?
6. Il limite di archiviazione per è 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 per comprimere i dati prima di memorizzarli O .
9. Come posso memorizzare una serie di oggetti?
10. Converti l'array in una stringa JSON utilizzando prima di riporlo O .
11. È sicuro archiviare dati sensibili ?
12. No, non è sicuro archiviare dati sensibili poiché è accessibile tramite JavaScript e può essere compromesso se il sito viene attaccato.
13. Posso usare in domini diversi?
14. NO, è 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 E verranno rimossi se l'utente cancella i dati del browser.

L'archiviazione e il recupero efficaci degli oggetti nello spazio di archiviazione Web HTML5 richiedono la conversione degli oggetti in stringhe JSON con e poi analizzarli nuovamente con . 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.