Introduzione
Gli oggetti localStorage sessionStorage, parte dell'API di archiviazione Web (web storage API), sono due ottimi strumenti per salvare le coppie chiave/valore (key/value) in locale. L'utilizzo di localStorage e sessionStorage per l'archiviazione è un'alternativa all'uso dei cookie e presenta alcuni vantaggi:
- I dati vengono salvati solo localmente e non possono essere letti dal server, il che elimina il problema di sicurezza dei cookie.
- Consente di salvare molti più dati (10 MB per la maggior parte dei browser).
- La sintassi è semplice.
È anche supportato in tutti i browser moderni, quindi puoi usarlo oggi senza problemi. I cookie sono ancora utili, soprattutto quando si tratta di autenticazione, ma ci sono momenti in cui localStorage o sessionStorage possono essere un'alternativa migliore.
Prerequisiti
Per completare questo tutorial, avrai bisogno di quanto segue:
- L'ultima versione di Node installata sulla tua macchina. Per installare Node, leggi i tutorial in questa pagina.
- Una conoscenza di base della codifica in JavaScript.
Comprendere localStorage e sessionStorage
localStorage e sessionStorage sono quasi identici e hanno la stessa API. La differenza è che con sessionStorage i dati vengono mantenuti solo fino alla chiusura della finestra o della scheda. Con localStorage, i dati vengono conservati fino a quando l'utente non cancella manualmente la cache del browser o fino a quando l'app Web non cancella i dati. Questo tutorial presenta localStorage, ma la sintassi per sessionStorage è la stessa.
Con queste conoscenze, ora puoi creare, leggere e aggiornare coppie chiave/valore in localStorage.
Creare, leggere e aggiornare le voci
È possibile creare voci per l'oggetto localStorage utilizzando il metodo setItem(). Il metodo setItem() accetta due argomenti, key e il valore corrispondente:
let key = 'Item 1';
localStorage.setItem(key, 'Value');Per leggere le voci, utilizzare il metodo getItem(). Il metodo getItem() accetta un argomento che deve essere la chiave. Questa funzione restituirà il valore corrispondente come stringa:
let myItem = localStorage.getItem(key);Questo codice imposta myItem uguale a 'Value', che è il valore corrispondente per key.
L'aggiornamento di una voce viene eseguita con il metodo setItem(). Di nuovo, ci vogliono due argomenti. L'argomento chiave sarà una chiave esistente mentre l'argomento valore sarà un nuovo valore:
localStorage.setItem(key, 'New Value');Ora, il valore localStorage per key è 'New Value' invece di 'Value'.
È possibile creare, leggere e aggiornare le voci nell'oggetto localStorage. È inoltre possibile eliminare singole voci e cancellare tutte le voci in formato localStorage.
Eliminare e cancellare e voci
È possibile eliminare una voce con il metodo removeItem(). Il metodo removeItem() accetta un argomento che sarà una chiave dell'oggetto localStorage:
localStorage.removeItem(key);Puoi anche cancellare tutti gli elementi in localStorage. Questo può essere fatto con il metodo clear():
Ecco come cancellare tutto ciò che è archiviato in localStorage:
localStorage.clear();Questi metodi ti danno la possibilità di rimuovere e cancellare gli elementi da localStorage rapidamente. Tuttavia, ci sono alcuni limiti con localStorage. Entrambi localStorage e sessionStorage possono memorizzare solo stringhe. Per ovviare a questo problema, dovrai utilizzare i metodi JSON.
Archiviare valori non di stringa con JSON
localStorage può memorizzare solo valori di stringa. Se si desidera archiviare oggetti o array come valori in localStorage, è possibile utilizzarli JSON.stringify() per convertirli in stringhe. Durante la creazione o l'aggiornamento di coppie chiave/valore in localStorage, utilizzare JSON.stringify() con l'oggetto o l'array come argomento:
let myObj = { name: 'Skip', breed: 'Labrador' };
localStorage.setItem(key, JSON.stringify(myObj));Sebbene myObj sia un oggetto, il metodo JSON.stringify(myObj) converte in una stringa. Quindi myObj ora è un valore di localStorage valido.
Per leggere e restituire valori in stringa, utilizzare il metodo JSON.parse(). Il metodo JSON.parse() accetta stringhe JSON e le converte in oggetti JavaScript. JSON.parse() prende .getItem() come argomento:
let item = JSON.parse(localStorage.getItem(key));Ora item è impostato uguale al valore di key. Nello snippet di codice precedente, il valore di key era impostato sulla versione con stringhe di myObj. Utilizzando JSON.parse converte myObj indietro in un oggetto. Quindi item è impostato uguale a myObj come un oggetto, non una stringa.
Essere in grado di convertire array e oggetti in stringhe usando JSON.stringify e riconvertirli usando JSON.parse è molto utile. Dovrai anche sapere come controllare se localStorage è vuoto o meno.
Controllare gli articoli
In questo passaggio, testerai la presenza di elementi nel file localStorage. È possibile utilizzare le dichiarazioni if per verificare se localStorage contiene elementi o se è vuoto. Per fare ciò, controlla la lunghezza di localStorage:
if (localStorage.length > 0) {
// ...
}Se localStorage.length è maggiore di 0, allora ci sono elementi all'interno dell'oggetto localStorage. Includere una dichiarazione else nel caso in cui non ci siano elementi in localStorage:
if (localStorage.length > 0) {
// ...
} else {
// ...
}È possibile includere codice da applicare nelle istruzioni if e else. Potresti voler iterare sugli elementi in localStorage.
Ripetizione degli elementi
Gli oggetti localStorage e sessionStorage non supportano il metodo forEach. Per scorrere gli elementi in localStorage, usa un ciclo for:
for (let i = 0; i < localStorage.length; i++){
}Il metodo key() accetta un numero intero come argomento e restituisce la chiave corrispondente. Con un ciclo for, passa i come numero intero per key():
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
}Utilizza il metodo getItem per restituire il valore corrispondente per key:
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let value = localStorage.getItem(key);
}Crea una dichiarazione console.log per stampare sia key e value sullo schermo:
for (let i = 0; i < localStorage.length; i++){
let key = localStorage.key(i);
let value = localStorage.getItem(key);
console.log(key, value);
}key() è molto utile per l'iterazione attraverso localStorage utilizzano cicli for. Non tutti i browser supportano localStorage.
Verificare il supporto
Puoi testare il supporto per localStorage verificando se è disponibile window sull'oggetto utilizzando un'istruzione if:
if (window.localStorage) {
// localStorage supported
}È inoltre possibile utilizzare il sito Web Can I use… per verificare il supporto localStorage dei principali browser.
Conclusione
È possibile utilizzare gli oggetti localStorage o sessionStorage per memorizzare le coppie chiave/valore. Esistono metodi che ti consentono di interagire con gli elementi all'interno di localStorage. Con questo tutorial, hai creato, rimosso e aggiornato le voci all'interno di localStorage. Hai anche convertito i dati di array e oggetti in stringhe e viceversa utilizzando metodi JSON.
