Javascript Local Storage: Il browser come datastore


Con Javascript Local Storage, puoi trasforma il tuo browser in un datastore. CioĆØ, potrai imposta e recuperare oggetti allā€™interno del browser web e archiviare dati senza nessuna data di scadenza.
di Antonio Lamorgese


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.

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.


Leggi anche: Come creare un pdf in html e Javascript con PdfMake


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.


Leggi anche: Come creare una libreria javascript come Bootstrap


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Ć .

localStorage e sessionStorage in javascript
Antonio Lamorgese


Desideri acquisire nuove competenze?

corsi.it

Seguire questo corso online ti offrirĆ 
l'opportunitĆ  di acquisire nuove competenze e di
migliorare il tuo curriculum professionale.
Clicca qui per seguire le prime lezioni gratuite online

Corsi.it - Il portale Nr.1 al mondo di corsi online


Amministratore di rete e sviluppatore. Dopo anni di esperienza nel settore, ho ideato un sistema di gestione dati MYSQL in PHP senza scrivere una sola riga di codice. Scopri di piĆ¹....