Javascript Local Storage: Il browser come datastore

20 Settembre 202215 Novembre 2023 Antonio Lamorgese browser, development, fare, html, javascript, memoria, new, PDF, Programmazione, server, sviluppo, to, tutorial, video, web

Javascript è senza dubbio il linguaggio più utilizzato e diffuso al mondo. Utile per eseguire codice all’interno della finestra di un browser web. Nel tempo è diventato anche un linguaggio molto affidabile e maturo. Come tutti i linguaggi è caratterizzato dalla presenza di API che arricchiscono di straordinarie funzionalità il linguaggio. Da qualche anno ormai la Web Storage API, cioè quella libreria che si occupa della gestione della memorizzazione degli oggetti, utilizzati in fase di esecuzione di codice Javascript, è stata aggiornata con l’implementazione di due nuove proprietà gestite dall’oggetto window. Le due proprietà in questione sono: localStorage e sessionStorage. Entrambe danno vita a “Javascript Local Storage”. Un ambiente che trasformerà il tuo browser web in un vero e proprio datastore locale di oggetti.

Indice del Post...

1. Differenza tra Cookie, localStorage e sessionStorage

Sicuramente ti starai chiedendo: “che differenza c’è nella gestione di un datastore tramite cookies da una gestione effettuata sfruttando localStorage e sessionStorage?” La domanda è più che pertinente e, a dire il vero, mi fa piacere che tu te la sia posta. Come ben sai i linguaggi di programmazione si evolvono e, questa evoluzione spesso, è imposta da fattori che impongono un livello di gestione della sicurezza sempre più elevato. Specialmente in ambito web. Infatti, funzionano sulla politica della stessa origine. Pertanto i dati archiviati lato client, saranno disponibili solo su questa origine. A differenza dei cookies, localStorage e sessionStorage, hanno limiti di memoria, per la memorizzazione dei dati, più ampi. Ricorderai che con i cookies avevi al massimo 4KB a tua disposizione. Bene, localStorage e sessionStorage, hanno ben 5MB a disposizione per tutto il datastore. Inoltre, essendo i dati gestibili solo lato client, non verranno spediti di volta in volta al server, riducendo il traffico tra client e server.

2. Javascript Local Storage in Action

Ora, dopo aver fugato ogni tipo di dubbio sull’utilizzo di Javascript Local Storage torniamo alle proprietà localStorage e sessionStorage. Come tutto ciò che ha a che fare con lo sviluppo in generale un buon esempio è la risorsa più importante per spiegare nel dettaglio l’implementazione e l’utilizzo di queste due fondamentali proprietà. Prima però, ti anticipo che per impostare e recuperare dati dal datastore del browser, sia localStorage sia sessionStorage, utilizzano due metodi che non lasciano alcun dubbio circa la loro funzione. I due metodi sono: setItem e getItem. Nei due esempi che seguono, il cui codice potrai testare, copiando e incollando, in una tua pagina html, i due metodi sono implementati con una semplicità disarmante.

Esempio d’uso di localStorage:

<!DOCTYPE html>
<html>
   <body>
      <h1>Funzionamento di localStorage</h1>
      <h2>La proprietà localStorage</h2>
      <p>Il nome memorizzato in localStorage è:</p>
      <p id="demo"></p>
      <script>
        // -------------------------------
        // Imposta la variabile “lastname”
        // -------------------------------
        localStorage.setItem("lastname", "Smith");
        // -----------------------------------------------
        // Preleva Il contenuto della variabile “lastname”
        // e la visualizza al’interno del paragrafo “demo”
        // -----------------------------------------------
        document.getElementById("demo").innerHTML = localStorage.getItem("lastname");
      </script> 
   </body>
</html>

Esempio d’uso di sessionStorage:

<html>
   <body>
      <h1> Funzionamento di sessionStorage </h1>
      <h2> La proprietà sessionStorage</h2>
      <p>Il Nome è:</p>
      <p id="demo"></p>
      <script>
         // -------------------------------------------
         // Imposta la variabile di sessione “lastname”
         // -------------------------------------------
         sessionStorage.setItem("lastname", "Smith");
         // -----------------------------------------------------------
         // Preleva Il contenuto della variabile di sessione “lastname”
         // e la visualizza al’interno del paragrafo “demo”
         // -----------------------------------------------------------
         let personName = sessionStorage.getItem("lastname");
         document.getElementById("demo").innerHTML = personName;
      </script>
   </body>
</html>

Il codice non lascia dubbi. Capire il funzionamento di queste due straordinarie proprietà dell’oggetto window è estremamente semplice. Tuttavia, è opportuno puntualizzare, quando usare localStorage e quando utilizzare sessionStorage. La differenza sostanziale tra localStorage e sessionStorage riguarda solo la visibilità che gli oggetti trattati hanno all’interno del datastore di un browser. Infatti, mentre con sessionStorage gli oggetti sono visibili solo per finestra/scheda in cui sono stati impostati e restano attivi fino alla chiusura della finestra/scheda del browser che li ha generati. Con localStorage i dati persistono fino ad una loro eliminazione esplicita e, se non vengono rimossi, saranno disponibili anche per visite future della pagina web ma solo sulla stessa origine. I dati memorizzati con localStorage non hanno nessuna scadenza.

3. Eliminare oggetti localStorage

Come anticipato precedentemente, Javascript, è stato arricchito di due proprietà. La prima, localStorage, molto comoda e ampiamente utilizzata dagli sviluppatori, capace di memorizzare dati all’interno del browser, ma, dopo la chiusura della finestra/scheda del browser che ha generato i dati, le informazioni continueranno a persistere fino a quando lo sviluppatore non le eliminerà esplicitamente. La seconda proprietà, sessionStorage, definisce oggetti di sessione. Per quanto riguarda sessionStorage, gestendo oggetti di sessione, questi ultimi verranno rimossi automaticamente alla chiusura del browser o della finestra/scheda che li ha generati. Mentre, l’eliminazione di oggetti, generati con la proprietà localStorage, avviene esplicitamente. Questo significa che sarà il programmatore a gestirne la vita.

Eliminare oggetti creati da localStorage è molto semplice. Infatti, questa proprietà ha un metodo “removeItem” che riceve come parametro l’oggetto da eliminare. Quindi, volendo eliminare l’oggetto “lastname”, presente nei due script trattati nel paragrafo precedente, occorre eseguire questo comando:

localStorage.removeItem(‘lastname’);

Dopo l’esecuzione di questo comando, l’oggetto “lastname”, verrà completamente rimosso dal datastore del browser. Fino all’esecuzione di tale operazione, tutti gli oggetti, creati con la proprietà localStorage, saranno sempre disponibili, anche a distanza di giorni, sulla stessa origine. Cioè, stesso computer e stesso browser accederanno ad oggetti localStorage fino ad una loro esplicita eliminazione.

4. Conclusioni

Per fugare ogni dubbio, circa l’utilizzo di queste due nuove straordinarie proprietà, integrate all’interno dell’oggetto globale window, ti consiglio di seguire questo breve video tutorial che ti permetterà di capire nel dettaglio le differenze tra queste due fondamentali proprietà.