Javascript localStorage e sessionStorage

Con le nuove API di Javascipt / HTML 5 abbiamo la possibilità di sbarazzarci dei cookie, per usare qualcosa di più moderno e sicuro.

Abbiamo due possibilità: localStorage e sessionStorage.

In veirtà i due oggetti sono uguali, cambia solo il tempo di memorizzazione delle informazioni: sessionStorage le mantiene per la sessione corrente, mentre localStorage più a lungo.

Due per ora i contro: il primo è che non è supportato da tutti i browser ovviamente, il secondo è che non è possibile definire il tempo di memoriazzazione come nei cookie (per quanto riguarda localStorage).

Ma veniamo ad un esempio pratico; avevamo visto come geolocalizzare l'utente, e avevamo visto che ogni volta che si accede alla pagina viene richiesta l'autorizzazione.

Allora faremo in modo che venga richiesta solo la prima volta che si accede alla pagina, memorizzando le coordinate con sessionStorage.

Questa la funzione modificata:

function getLocation() {
    if (typeof(sessionStorage) !== "undefined") {
        if (sessionStorage.getItem("latitudine") === null) {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function(position) {
                    sessionStorage.setItem("latitudine", position.coords.latitude);
                    sessionStorage.setItem("longitudine", position.coords.longitude);
                    alert(sessionStorage.getItem("latitudine") + " - " + sessionStorage.getItem("longitudine"));
                });
            }
        } else {
            alert(sessionStorage.getItem("latitudine") + " - " + sessionStorage.getItem("longitudine"));
        }
    }
}

Entrambe le funzioni di storage si basano sul concetto chiave-valore.

Prima controlliamo se il browser supporta il sessionStorage; esistono diversi modi per farlo.

Sotto, la funzione getItem vuole come parametro la chiave, e noi controlliamo la latitudine.

Se è null controlliamo che il browser supporta la geolocalizzazione e in caso salviamo le coordinate in due oggetti sessionStorage.

Qua usiamo la funzione setItem che richiede due parametri: il nome della chiave e il valore.

Se invece il controllo getItem va a buon fine mostriamo le coordinate con alert.

Qua abbiamo usato sessionStorage, ma se volete usare localStrogare vi basterà cambiare sessionStorage in localStorage; funzionano alla stessa identica maniera.

Qua altre info utili.

Ciao!