Il local storage è una potente caratteristica del web storage che permette di salvare sul browser dell'utente dei dati sotto forma di stringhe organizzate in coppie di chiavi e valori. L'oggetto di riferimento è localStorage e la memorizzazione dei dati, sempre associati ad un dominio, permane anche dopo che l'utente ha chiuso la finestra del browser. Vediamo insieme questa caratteristica.
Memorizzare e leggere i dati
Per memorizzare i dati si utilizza il metodo setItem() che accetta due valori: il nome della chiave e la stringa di dati:
localStorage.setItem('test', '1');
Ora abbiamo una chiave test e una stringa numerica. Possiamo leggere il suo valore con il metodo getItem():
console.log(localStorage.getItem('test')); // '1'
Cancellare una chiave
Per cancellare una chiave ed il suo valore si utilizza il metodo removeItem():
localStorage.removeItem('test');
console.log(localStorage.getItem('test')); // null
Cancellare tutti i dati
Per cancellare tutti i dati memorizzati nello storage si utilizza il metodo clear():
localStorage.clear();
Ottenere il nome di una chiave
Per ottenere il nome di una chiave si usa il metodo key():
console.log(localStorage.key('test')); // 'test'
Conoscere il numero delle chiavi
Per sapere quante chiavi sono state memorizzate si utilizza la proprietà length dell'oggetto localStorage:
console.log(localStorage.length); // 1
Memorizzare oggetti
Per impostazione predefinita tutti i valori vengono convertiti in stringhe. Per memorizzare oggetti dobbiamo utilizzare la combinazione dei metodi JSON.stringify() e JSON.parse():
localStorage.setItem('test', JSON.stringify({name: 'value'}));
console.log(JSON.parse(localStorage.getItem('test')).name); // 'value'
Usi del local storage
Il local storage ha l'unico limite della quantità in megabyte di dati che si possono memorizzare, quantità che varia da browser a browser e che va da un minimo di 5 ad un massimo di 10 megabyte. Tuttavia questa quantità è più che sufficiente per creare pagine che si ricordino delle scelte dell'utente o che abbiano un caricamento più veloce grazie alle informazioni già contenute nel local storage.