LocalStorage in JavaScript: Guida Completa per Principianti con Esempi Pratici

Principiante
JavaScript

Scopri come salvare dati nel browser dell'utente utilizzando LocalStorage in JavaScript. Impara a gestire persistenza dei dati, oggetti e stringhe in modo semplice.

Pubblicato
Tag
Web Development javascript frontend JSON web storage localStorage

Introduzione a LocalStorage

Nel mondo dello sviluppo web moderno, una delle sfide principali per un programmatore è la gestione dello stato dell'applicazione. Quando un utente naviga in un sito, ricarica la pagina o chiude il browser, tutte le variabili definite in JavaScript vengono resettate. Questo accade perché JavaScript, per sua natura, risiede nella memoria volatile (RAM) del computer durante l'esecuzione della sessione.

Per risolvere questo problema, i browser moderni mettono a disposizione le Web Storage API, di cui localStorage è l'implementazione più popolare. LocalStorage permette di salvare coppie di chiavi e valori direttamente nel browser dell'utente. A differenza dei cookie, che vengono inviati al server a ogni richiesta HTTP, i dati in LocalStorage rimangono esclusivamente sul client, rendendo le applicazioni più veloci e riducendo il carico sul server.

Perché usare LocalStorage?

L'utilizzo di LocalStorage è fondamentale quando vogliamo creare un'esperienza utente fluida senza dover necessariamente implementare un database complesso o un sistema di autenticazione per ogni piccola preferenza. Alcuni casi d'uso comuni includono:

  • Salvataggio del tema (Dark Mode vs Light Mode).
  • Memorizzazione di un carrello della spesa temporaneo.
  • Salvataggio della bozza di un modulo di contatto.
  • Memorizzazione di token di sessione (anche se per motivi di sicurezza è necessario essere cauti).

Come funziona LocalStorage: I Fondamenti

LocalStorage è un oggetto globale disponibile in JavaScript tramite window.localStorage. Funziona come un dizionario o un oggetto JavaScript semplice, dove ogni dato è associato a una chiave univoca.

Un aspetto cruciale da ricordare è che localStorage memorizza solo stringhe. Se provi a salvare un numero, un array o un oggetto, JavaScript li convertirà automaticamente in stringa, il che potrebbe portare a risultati inaspettati (come il famoso [object Object]) se non gestito correttamente.

Le operazioni principali

Esistono quattro metodi fondamentali per interagire con LocalStorage:

  1. setItem(key, value): Aggiunge una chiave e un valore al database.
  2. getItem(key): Recupera il valore associato a una specifica chiave.
  3. removeItem(key): Elimina un elemento specifico.
  4. clear(): Svuota completamente tutto il contenuto di LocalStorage per quel dominio.

Implementazione Pratica: Operazioni di Base

Vediamo subito come applicare questi concetti in un codice reale. Immaginiamo di voler salvare il nome di un utente in modo che, al suo ritorno sul sito, venga accolto con un messaggio personalizzato.

// 1. Salvataggio di un dato
// Sintassi: localStorage.setItem('chiave', 'valore');
localStorage.setItem('username', 'Mario Rossi');
console.log('Nome utente salvato con successo!');

// 2. Recupero di un dato
// Sintassi: localStorage.getItem('chiave');
const nomeUtente = localStorage.getItem('username');

if (nomeUtente) {
    console.log(`Benvenuto di nuovo, ${nomeUtente}!`);
} else {
    console.log('Utente non riconosciuto, per favore effettua l'accesso.');
}

// 3. Rimozione di un singolo dato
// Questo eliminerà solo la chiave 'username'
// localStorage.removeItem('username');

// 4. Pulizia totale
// Questo cancella TUTTO ciò che è stato salvato dal nostro sito
// localStorage.clear();

In questo esempio, abbiamo utilizzato setItem per scrivere il dato e getItem per leggerlo. Se l'utente ricarica la pagina, la variabile nomeUtente verrà ripopolata correttamente perché il dato persiste nel disco rigido del browser.

Gestire Oggetti e Array con JSON.stringify e JSON.parse

Come accennato in precedenza, LocalStorage accetta solo stringhe. Se proviamo a salvare un oggetto JavaScript direttamente, otterremo un errore di formattazione.

const utente = { nome: 'Luca', email: 'luca@example.com', livello: 5 };
localStorage.setItem('userProfile', utente); 
// Risultato: LocalStorage salverà la stringa "[object Object]"

Per superare questo limite, dobbiamo utilizzare il formato JSON (JavaScript Object Notation). JSON ci permette di trasformare un oggetto in una stringa (serializzazione) e viceversa (deserializzazione).

Serializzazione con JSON.stringify()

Quando vogliamo salvare un oggetto o un array, usiamo JSON.stringify(). Questo metodo converte l'oggetto in una stringa JSON valida.

Deserializzazione con JSON.parse()

Quando recuperiamo il dato, esso sarà ancora una stringa. Per trasformarlo nuovamente in un oggetto JavaScript utilizzabile (per accedere alle proprietà con il punto, es. utente.nome), usiamo JSON.parse().

Ecco l'esempio completo:

// Definizione di un oggetto complesso
const settings = {
    theme: 'dark',
    notifications: true,
    language: 'it'
};

// SALVATAGGIO: Convertiamo l'oggetto in stringa prima di salvarlo
localStorage.setItem('appSettings', JSON.stringify(settings));
console.log('Impostazioni salvate!');

// RECUPERO: Recuperiamo la stringa e la riconvertiamo in oggetto
const savedSettingsString = localStorage.getItem('appSettings');

if (savedSettingsString) {
    const parsedSettings = JSON.parse(savedSettingsString);
    console.log(`Il tema selezionato è: ${parsedSettings.theme}`);
    console.log(`Lingua: ${parsedSettings.language}`);
} else {
    console.log('Nessuna impostazione trovata.');
}

Questo pattern è lo standard industriale per gestire dati complessi in LocalStorage.

Esempi Pratici: Caso d'uso Reale (Dark Mode)

Costruiamo una funzionalità reale: un interruttore per cambiare il tema della pagina tra chiaro e scuro, che ricordi la scelta dell'utente anche dopo il refresh della pagina.

HTML

<button id='theme-toggle'>Cambia Tema</button>

CSS

body.light-mode { background-color: white; color: black; }
body.dark-mode { background-color: #333; color: white; }

JavaScript

const toggleBtn = document.getElementById('theme-toggle');
const bodyElement = document.body;

// 1. Controllo iniziale al caricamento della pagina
const currentTheme = localStorage.getItem('theme');

if (currentTheme) {
    bodyElement.classList.add(currentTheme);
} else {
    // Tema di default se non c'è nulla in localStorage
    bodyElement.classList.add('light-mode');
}

// 2. Gestione del click per cambiare tema
toggleBtn.addEventListener('click', () => {
    if (bodyElement.classList.contains('light-mode')) {
        // Passa a Dark Mode
        bodyElement.classList.replace('light-mode', 'dark-mode');
        localStorage.setItem('theme', 'dark-mode');
    } else {
        // Passa a Light Mode
        bodyElement.classList.replace('dark-mode', 'light-mode');
        localStorage.setItem('theme', 'light-mode');
    }
});

In questo scenario, LocalStorage agisce come un piccolo database locale che permette all'utente di non dover impostare il tema ogni volta che visita il sito.

Limiti, Errori Comuni e Sicurezza

Sebbene LocalStorage sia estremamente utile, non è una soluzione universale. Esistono limiti tecnici e di sicurezza che ogni sviluppatore deve conoscere.

Limiti di spazio

LocalStorage ha un limite di capacità che varia a seconda del browser, ma generalmente si attesta intorno ai 5MB. Se provi a salvare più dati di quelli consentiti, il browser solleverà un errore di tipo QuotaExceededError.

Problemi di performance

LocalStorage è un'operazione sincrona. Ciò significa che mentre il browser scrive o legge dal disco, il thread principale di JavaScript è bloccato. Se devi salvare quantità massicce di dati o eseguire operazioni di lettura/scrittura migliaia di volte al secondo, potresti notare dei rallentamenti (lag) nell'interfaccia utente.

Sicurezza (XSS)

Questo è il punto più critico. LocalStorage è accessibile da qualsiasi script che giri nello stesso dominio. Se il tuo sito è vulnerabile a attacchi XSS (Cross-Site Scripting), un malintenzionato potrebbe iniettare uno script che legge tutto il contenuto di LocalStorage (inclusi eventuali token di sessione) e inviarlo a un server esterno.

Regola d'oro: Non salvare mai password, numeri di carta di credito o dati sensibili in LocalStorage.

Errori Comuni

  • Dimenticare JSON.parse(): Tentare di accedere a una proprietà di un valore recuperato da LocalStorage senza averlo prima convertito da stringa a oggetto.
  • Confondere LocalStorage con SessionStorage: sessionStorage funziona in modo identico, ma i dati vengono cancellati non appena la scheda del browser viene chiusa. Usa LocalStorage per dati permanenti e SessionStorage per dati temporanei alla sessione.

FAQ Rapide

**Q: Posso usare LocalStorage per salvare immagini? **A: Non direttamente. Dovresti convertire l'immagine in una stringa Base64, ma tieni presente che questo aumenterà drasticamente la dimensione del dato, raggiungendo rapidamente il limite di 5MB.

**Q: Come posso vedere i dati salvati in LocalStorage? **A: Apri i Developer Tools del browser (F12), vai alla scheda "Application" (su Chrome/Edge) o "Storage" (su Firefox) e seleziona "Local Storage" nel menu a sinistra.

**Q: LocalStorage è supportato da tutti i browser? **A: Sì, è supportato da tutti i browser moderni (IE8+).

Prossimi Passi e Approfondimenti

Ora che hai padroneggiato LocalStorage, potresti chiederti come gestire quantità di dati maggiori o operazioni più complesse. Ecco alcune strade per approfondire:

  1. IndexedDB: Se i 5MB di LocalStorage non sono sufficienti o se hai bisogno di indicizzare i dati per ricerche rapide, studia IndexedDB. È un database NoSQL completo integrato nel browser, asincrono e molto più potente.
  2. Cookies: Impara quando usare i cookie invece di LocalStorage, specialmente per l'autenticazione lato server (utilizzando l'attributo HttpOnly per prevenire attacchi XSS).
  3. State Management: Se stai usando framework come React o Vue, scopri come integrare LocalStorage con i loro sistemi di gestione dello stato (come Redux o Vuex) per creare applicazioni che "ricordano" l'utente.

La persistenza dei dati lato client è un pilastro fondamentale per creare Web App professionali. Inizia implementando piccole funzionalità e sperimenta con la serializzazione JSON per rendere le tue applicazioni più intelligenti e user-friendly.

Continua a leggere