Web Storage: LocalStorage SessionStorage Cookies

Web Storage: LocalStorage SessionStorage Cookies

Nello sviluppo web moderno, la gestione dei dati sul lato client è diventata una competenza essenziale. Gli sviluppatori spesso si affidano a localStorage, sessionStorage e cookie per archiviare i dati nel browser dell’utente. Sebbene questi tre meccanismi servano a scopi simili, presentano differenze distinte in termini di capacità, persistenza e casi d’uso. In questo blog, esploreremo queste differenze, con esempi, per aiutarti a comprendere meglio quando e come utilizzare ciascuno di essi.

1. localStorage: archiviazione persistente lato client

Scopo: localStorage è progettato per archiviare dati sul lato client che persistono anche dopo la chiusura del browser. È una scelta eccellente per i dati che devono essere conservati in più sessioni.

Capacità: localStorage offre un notevole spazio di archiviazione, in genere fino a 10 MB per dominio, sufficiente per la maggior parte delle applicazioni.

Persistenza: i dati archiviati in localStorage rimangono disponibili finché non vengono eliminati esplicitamente dall’utente o dall’applicazione. Ciò lo rende ideale per archiviare le preferenze dell’utente, come le impostazioni del tema, che dovrebbero persistere nelle diverse visite al sito.

Esempio: supponiamo di avere un’applicazione web che offre sia la modalità chiara che quella scura. Puoi usare localStorage per salvare le preferenze dell’utente in modo che la prossima volta che visita il sito, questo venga caricato automaticamente nella modalità scelta.

2. sessionStorage: Archiviazione temporanea basata sulla sessione

Scopo: sessionStorage memorizza anche i dati sul lato client, ma è limitato alla durata della sessione della pagina. Ciò significa che i dati vengono cancellati quando l’utente chiude la scheda o la finestra del browser.

Capacità: simile a localStorage, sessionStorage fornisce circa 5 MB di spazio di archiviazione per dominio. Sebbene la capacità sia inferiore, è spesso sufficiente per i dati temporanei.

Persistenza: la differenza principale tra sessionStorage e localStorage è la persistenza. I dati di sessionStorage sono disponibili solo per la durata della sessione della pagina, il che li rende adatti per archiviare dati temporanei che non devono persistere oltre la sessione corrente.

Esempio: immagina un modulo multi-step in cui gli utenti inseriscono dati in più pagine. Puoi usare sessionStorage per archiviare temporaneamente i dati del modulo mentre l’utente procede nei vari step. Questo assicura che se ricaricano accidentalmente una pagina, non perdono i loro progressi.

// Save form data temporarily in sessionStorage
sessionStorage.setItem('step1Data', JSON.stringify({ name: 'John Doe', age: 30 }));

// Retrieve the saved data
const step1Data = JSON.parse(sessionStorage.getItem('step1Data'));
console.log(step1Data); // Output: { name: 'John Doe', age: 30 }

3. Cookie: piccolo archivio persistente con interazione con il server

Scopo: i cookie vengono utilizzati per memorizzare piccoli pezzi di dati che devono persistere tra le sessioni e possono essere inviati con richieste HTTP al server. Sono spesso utilizzati per tracciare le sessioni utente, memorizzare token di autenticazione e ricordare le impostazioni utente.

Capacità: i cookie hanno una capacità molto più ridotta rispetto a localStorage e sessionStorage, con un limite di 4 KB per cookie. Tuttavia, possono essere archiviati più cookie, ognuno con questo limite.

Persistenza: i cookie hanno un tempo di scadenza configurabile. Possono scadere alla fine di una sessione o persistere per una durata specificata. Questa flessibilità consente di utilizzare i cookie per l’archiviazione sia a breve che a lungo termine.

Esempio: un utilizzo comune dei cookie è quello di memorizzare il token di accesso di un utente, che consente all’utente di rimanere connesso durante le sessioni senza dover reinserire le proprie credenziali ogni volta che visita il sito.

// Set a cookie with an expiration date
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";

// Retrieve the cookie value
const cookies = document.cookie.split(';').reduce((acc, cookie) => {
const [key, value] = cookie.trim().split('=');
acc[key] = value;
return acc;
}, {});
console.log(cookies.username); // Output: JohnDoe

Quando utilizzare ciascun meccanismo di archiviazione

localStorage: da utilizzare quando è necessario archiviare grandi quantità di dati che devono persistere su più sessioni e non sono sensibili (ad esempio, preferenze utente, stato dell’applicazione non sensibile).
sessionStorage: ideale per dati temporanei che devono persistere solo per la durata della sessione dell’utente (ad esempio, dati di moduli di una singola sessione, stato temporaneo).

Cookie: ideali per archiviare piccole porzioni di dati che devono essere inviate al server tramite richieste HTTP o che necessitano di una scadenza specifica (ad esempio, token di autenticazione, preferenze utente che devono interagire con il server).

Conclusione – Web Storage: LocalStorage SessionStorage Cookies

Comprendere le differenze tra localStorage, sessionStorage e cookie è fondamentale per fare la scelta giusta nelle tue applicazioni web. Ognuno ha i suoi punti di forza e limiti, e sapere quando usare ciascuno ti aiuterà a creare applicazioni più efficienti e user-friendly.

Padroneggiando questi strumenti, sarai meglio equipaggiato per gestire l’archiviazione dei dati lato client nel tuo prossimo progetto, garantendo un’esperienza fluida ai tuoi utenti.

(fonte)

Innovaformazione, scuola informatica specialistica promuove l’aggiornamento continuo per i team di sviluppatori. L’offerta formativa completa rivolta alle aziende è presente sul nostro sito QUI.

INFO: info@innovaformazione.net – tel. 3471012275 (Dario Carrassi)