localStorage JavaScript: cosa è, come si usa

Il localStorage è un oggetto che, utilizzando JavaScript, consente di leggere e scrivere informazioni nel browser dell’utente.

Le informazioni conservate nel localStorage vengono mantenute anche quando il browser viene chiuso.

Potrai salvare in questo spazio fino a 5 MiB di informazioni.

Indice

localStorage JavaScript: cosa è

localStorage è un oggetto disponibile nell’oggetto globale window disponibile in ogni pagina web nel contesto di esecuzione di JavaScript.

Questo oggetto è un mappa chiave-valore che consente di leggere, scrivere e cancellare informazioni con semplici metodi messi a disposizione dal browser.

Le chiavi e i valori sono sempre salvati come stringa con formato UTF-16.

La conversione viene fatta automaticamente al momento del salvataggio all’interno di localStorage.

Questo oggetto è reso disponibile in funzione dell’indirizzo della pagina web.

In altre parole, l’oggetto localStorage di https://www.dariocapozzi.it sarà diverso da quello di https://www.youtube.com.

Non solo: dal codice JavaScript eseguito nella pagina di https://www.dariocapozzi.it non potrà accedere a quello di https://www.youtube.com e viceversa.

localStorage JavaScript: come si usa

L’oggetto localStorage implementa l’interfaccia Storage

Per questo motivo, localStorage dispone dei seguenti attributi e metodi:

attributo length: rappresenta il numero di informazioni salvate
metodo key(): ritorna il valore conservato alla posizione n, dove n è un intero positivo che rappresenta l’ennesima informazione conservata
metodo getItem(): ritorna il valore corrispondente alla chiave fornita al metodo
metodo setItem(): salva nel localStorage la coppia [chiave, valore] forniti
metodo removeItem(): rimuove dall’oggetto l’informazione corrispondente alla chiave fornita
metodo clear(): rimuove tutte le informazioni memorizzate nell’oggetto

localStorage vs sessionStorage

sessionStorage ha lo stesso funzionamento di localStorage.

Infatti, anche questo oggetto è disponibile nell’oggetto window ed implementa l’interfaccia Storage.

L’unica differenza tra i due, riguarda la persistenza dei dati.

A differenza di localStorage, nell’oggetto sessionStorage le informazioni vengono conservate solo per la durata della sessione di pagina.

Semplificando un po’, si può affermare che la sessione dura finché l’utente non chiude / abbandona la pagina web che ospitava l’oggetto sessionStorage.

Per approfondire ulteriormente il funzionamento di sessionStorage e la definizione di sessione di pagina ti invito a leggere la documentazione di MDN dedicata all’argomento.