Utilizzare LocalStorage e SessionStorage per il Salvataggio di Dati di Navigazione

Introduzione

In questo tutorial, esploreremo come utilizzare LocalStorage e SessionStorage per salvare informazioni relative alla navigazione degli utenti su un sito web. Questi strumenti sono parte della Web Storage API e permettono di memorizzare dati in modo semplice e accessibile. Impareremo a implementare un sistema che tiene traccia delle pagine visitate dagli utenti, migliorando così l´esperienza di navigazione.

Codice completo

Di seguito è riportato un esempio completo di come utilizzare LocalStorage e SessionStorage per salvare le informazioni sulle pagine visitate. In questo esempio, salveremo l´URL delle pagine visitate e mostreremo un elenco di queste pagine all´utente.


// Funzione per aggiungere l´URL della pagina visitata a LocalStorage
function salvaVisita() {
    // Ottieni l´URL corrente
    const urlCorrente = window.location.href;

    // Controlla se l´array di visite esiste già in LocalStorage
    let visite = JSON.parse(localStorage.getItem(´visite´)) || [];

    // Aggiungi l´URL corrente all´array di visite
    visite.push(urlCorrente);

    // Salva l´array aggiornato in LocalStorage
    localStorage.setItem(´visite´, JSON.stringify(visite));

    // Aggiorna la lista delle visite
    mostraVisite();
}

// Funzione per mostrare le visite salvate
function mostraVisite() {
    // Ottieni l´elemento dove mostrare le visite
    const listaVisite = document.getElementById(´lista-visite´);

    // Pulisci la lista esistente
    listaVisite.innerHTML = ´´;

    // Ottieni l´array di visite da LocalStorage
    const visite = JSON.parse(localStorage.getItem(´visite´)) || [];

    // Aggiungi ogni visita alla lista
    visite.forEach((url) => {
        const li = document.createElement(´li´);
        li.textContent = url;
        listaVisite.appendChild(li);
    });
}

// Funzione per cancellare le visite salvate
function cancellaVisite() {
    localStorage.removeItem(´visite´);
    mostraVisite();
}

// Esegui la funzione di salvataggio al caricamento della pagina
window.onload = salvaVisita;

Spiegazione

Analizziamo il codice passo per passo:

salvaVisita: Questa funzione viene chiamata al caricamento della pagina. Ottiene l´URL corrente e lo aggiunge a un array di visite salvato in LocalStorage. Se non ci sono visite precedenti, crea un nuovo array.
mostraVisite: Questa funzione recupera l´array di visite da LocalStorage e lo visualizza in una lista non ordinata (<ul>) nel DOM. Ogni URL visitato viene aggiunto come un elemento della lista.
cancellaVisite: Questa funzione permette di rimuovere tutte le visite salvate da LocalStorage. È utile per ripristinare lo stato iniziale.
window.onload: Questa parte del codice assicura che la funzione salvaVisita venga eseguita ogni volta che la pagina viene caricata.

Best practice

Quando si lavora con LocalStorage e SessionStorage, è importante seguire alcune best practice:

Gestione della dimensione dei dati: LocalStorage ha un limite di circa 5-10 MB. Assicurati di non superare questo limite per evitare errori.
Sicurezza: Non memorizzare informazioni sensibili come password o dati personali in LocalStorage, poiché i dati possono essere facilmente accessibili tramite strumenti di sviluppo del browser.
Controllo della compatibilità: Verifica che il browser supporti LocalStorage e SessionStorage prima di utilizzarli. Puoi farlo controllando if (typeof(Storage) !== "undefined").
Utilizzo di JSON: Quando salvi oggetti o array, utilizza JSON.stringify() per convertirli in stringhe e JSON.parse() per riconvertirli in oggetti.

Riepilogo

In questo tutorial, abbiamo imparato come utilizzare LocalStorage e SessionStorage per salvare i dati di navigazione degli utenti. Abbiamo creato un semplice sistema che registra le pagine visitate e le visualizza in un elenco. Questi strumenti possono migliorare notevolmente l´esperienza utente, consentendo di mantenere informazioni persistenti tra le sessioni di navigazione.

Approfondisci con risorse ufficiali

Add as preferred source on Google