JavaScript: usare il local storage

Short link

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.