JavaScript (spesso abbreviato in JS) è una delle fondamenta della moderna infrastruttura web. È un linguaggio di programmazione leggero, interpretato e orientato agli oggetti che supporta funzioni di prima classe. JavaScript è noto soprattutto per la sua implementazione in pagine web dinamiche. A causa delle sue caratteristiche, tuttavia, JavaScript viene utilizzato anche in ambienti non-browser.
In questa guida, discuteremo in dettaglio due oggetti JavaScript: localStorage e sessionStorage.
Panoramica di localStorage e sessionStorage
Gli oggetti localStorage e sessionStorage sono offerti come parte delle API di web storage. È un ottimo strumento per l'archiviazione locale di coppie chiave-valore. L'uso di localStorage e sessionStorage è un'ottima alternativa ai cookie. Questo approccio offre alcuni vantaggi aggiuntivi:
- I dati sono memorizzati localmente e non possono essere letti dal server. Questo elimina i problemi di sicurezza legati ai cookie.
- Consente una maggiore capacità di archiviazione (fino a 10 MB per la maggior parte dei browser moderni).
- Sintassi semplice e diretta.
Questi oggetti sono supportati su tutti i browser web moderni, quindi non ci saranno problemi di compatibilità con i browser. I cookie sono ancora utili in molte situazioni, ad esempio per l'autenticazione. Tuttavia, ci sono situazioni in cui localStorage e sessionStorage offrono soluzioni migliori.
Prerequisiti
Per eseguire i passaggi mostrati in questo tutorial, avrai bisogno dei seguenti componenti:
- Un server Linux configurato correttamente. Questa guida mostra la configurazione del proprio server Ubuntu su CloudSigma.
- Node.js come runtime JavaScript. Scopri di più su come installare Node.js su Ubuntu qui.
- Un browser web moderno, ad esempio, Google Chrome o Firefox.
A scopo dimostrativo, abbiamo preso una pagina web di esempio allegata a uno script JS. Puoi scoprire di più su come aggiungere JavaScript a un file HTML qui:
Per quanto riguarda l'editor di testo, utilizzeremo Visual Studio Code:
Qual è la differenza tra localStorage e sessionStorage?
Sia localStorage e sessionStorage provengono dalla stessa API. Anche i loro comportamenti sono identici. L'unica differenza sta nel modo in cui ciascun oggetto consente la persistenza dei dati. Nel caso di sessionStorage, i dati persistono fino alla chiusura della finestra o della scheda. Con localStorage, i dati persistono finché la cache del browser non viene svuotata o l'applicazione web non li cancella.
In questo tutorial, ci concentreremo principalmente su localStorage. Tuttavia, la sintassi per sessionStorage è la stessa. Mostreremo come creare, leggere e aggiornare coppie chiave/valore utilizzando localStorage.
Passo 1 – Creazione di voci
Possiamo dichiarare una voce nell'oggetto localStorage utilizzando setItem(). Questo metodo accetta due argomenti: la chiave e il suo valore corrispondente. La struttura del metodo è la seguente:
|
1 |
localStorage.setItem(<key>, <value>) |
Nel seguente esempio, abbiamo creato una variabile key. Utilizzando il metodo setItem(), abbiamo impostato una nuova chiave e impostato il suo valore su ‘valore’:
|
1 2 |
let key = 'item_1'; localStorage.setItem(key, 'value'); |
Passo 2 – Lettura di voci
Ora, come leggiamo il valore memorizzato nella chiave? Per ottenere una chiave da localStorage, useremo il metodo getItem(). Accetta il nome della chiave e restituisce i valori memorizzati nella chiave. Useremo il metodo alert() per visualizzare il contenuto che recuperiamo:
|
1 2 |
let myItem = localStorage.getItem(key); alert(myItem); |
Successivamente, apri la pagina web in un browser web. Dovrebbe mostrare il valore memorizzato nella chiave:
Step 3 – Updating Entries
Una volta impostato un valore, rimarrà tale a meno che non venga modificato. Se usiamo nuovamente il metodo setItem() sulla stessa chiave , sostituirà automaticamente il vecchio valore con quello nuovo.
Nel seguente esempio, la chiave viene prima inizializzata con il valore ‘valore’. Nella riga successiva, abbiamo chiamato setItem() ancora una volta e impostato il valore su ‘nuovo valore’:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.setItem(key, 'new value'); let myItem = localStorage.getItem(key); alert(myItem); |
Vediamo cosa succede quando eseguiamo questo codice nel browser:
Come possiamo vedere, il valore della chiave è impostato su ‘nuovo valore’.
Passo 4 – Eliminazione delle voci
Se ci sono più voci nel localStorage (e anche in sessionStorage ) che non sono più necessarie, si consiglia di cancellarle in seguito. Questo libera più spazio per un uso successivo. L'app diventa anche più efficiente in termini di memoria.
Per eliminare una voce da localStorage, c'è un metodo dedicato removeItem(). Prende la chiave come argomento e la rimuove dal localStorage pool di dati:
|
1 |
localStorage.removeItem(<key_to_remove>) |
Implementiamolo nel nostro script:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.removeItem(key); let myItem = localStorage.getItem(key); alert(myItem); |
Quando viene eseguito, l'output dice null perché non esiste alcun valore per la chiave:
Passo 5 – Cancellazione delle voci
Nell'esempio precedente, abbiamo rimosso solo una chiave. Tuttavia, localStorage consente di cancellare tutti gli elementi memorizzati in un unico passaggio. Per cancellare tutte le voci, localStorage offre il metodo clear(). Non richiede argomenti:
|
1 |
localStorage.clear(); |
Mettiamo in azione il metodo:
|
1 2 3 4 5 |
let key = 'item_1'; localStorage.setItem(key, 'value'); localStorage.clear(); let myItem = localStorage.getItem(key); alert(myItem); |
Proprio come prima, rimuove tutte le voci da localStorage, quindi quando si tenta di accedere al valore della chiave, restituisce null:
Passo 6 – Lavorare con JSON
-
Memorizzazione di oggetti e array
Gli oggetti localStorage e sessionStorage possono memorizzare solo valori stringa. Tuttavia, ci saranno momenti in cui dovrai lavorare con oggetti o array. In tal caso, dobbiamo convertirli in una stringa.
JavaScript include la funzionalità JSON.stringify() che prenderà l'array/oggetto e lo convertirà in stringhe. Questo post fornisce una rapida panoramica del formato JSON. Per una guida più dettagliata, puoi leggere JSON in JavaScript.
In questo esempio, abbiamo creato un oggetto sampleObj con due campi name e location. Lo convertiremo in una stringa e lo memorizzeremo nella chiave:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = localStorage.getItem(key); alert(myItem); |
Qui, l'output sarà la stringa contenente i dati dell'oggetto:
-
Lettura di oggetti e array
Durante la memorizzazione, abbiamo convertito oggetti e array in stringhe. Possiamo prendere questa stringa e riconvertirla nel suo formato originale. Per farlo, utilizzeremo il metodo JSON.parse(). Prende una stringa e la riconverte in formato JSON:
|
1 2 3 4 5 |
let key = 'item_1'; let sampleObj = { name: "Jason", location: "Sweden" }; localStorage.setItem(key, JSON.stringify(sampleObj)); let myItem = JSON.parse(localStorage.getItem(key)); alert(JSON.stringify(myItem, null, " ")); |
Per quanto riguarda l'output, lo abbiamo riconvertito in una stringa e formattato per una migliore visualizzazione:
Passo 7 – Verifica della presenza di un elemento in localStorage
In questa sezione, mostreremo un semplice test per determinare se localStorage e sessionStorage contenga o meno elementi. Usando una semplice if istruzione, possiamo verificare la lunghezza di localStorage o sessionStorage. Se ci sono elementi, la lunghezza sarà maggiore di 0.
Per prima cosa, implementa il seguente esempio:
|
1 2 3 4 5 6 7 8 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ alert('true'); } else{ alert('false'); } |
Qui, l'output sarà ‘true’ perché esiste una chiave in localStorage:
Passo 8 – Iterare sugli elementi
Gli oggetti localStorage e sessionStorage memorizzano le chiavi in una struttura simile a un array. Non supportano il metodo forEach , quindi dovremo seguire la tecnica classica di utilizzare un for ciclo per iterare su ogni elemento.
Nel seguente esempio, verificheremo se localStorage sia vuoto o meno. Se non è vuoto, itereremo su ogni elemento:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
let key = 'item_1'; localStorage.setItem(key, 'new_value'); if(localStorage.length > 0){ for(i = 0; i < localStorage.length; i++){ let key = localStorage.key(i); let myItem = localStorage.getItem(key); alert(key); } } else{ alert('false'); } |
L'output mostrerà tutti gli elementi uno per uno:
Passo 9 – Verificare il supporto del browser
Possiamo verificare il supporto per localStorage (e sessionStorage) verificando se è disponibile sull'oggetto window. Una semplice if istruzione farà al caso nostro:
|
1 2 3 4 5 6 |
if(window.localStorage){ alert(true); } else{ alert(false); } |
Esegui il codice nel browser web:
Considerazioni finali
Questa guida ha mostrato come utilizzare gli oggetti localStorage e sessionStorage in JavaScript per memorizzare coppie chiave/valore nel browser. Le sintassi sono molto più semplici da usare. Abbiamo mostrato come creare, rimuovere e aggiornare le coppie chiave/valore. Abbiamo anche affrontato la memorizzazione di oggetti e array convertendoli in stringhe (e viceversa).
Per approfondire ulteriormente la tua conoscenza di JavaScript, puoi consultare i seguenti tutorial dal nostro blog:
- Basi di JavaScript: come lavorare con date e ore
- JavaScript: un tutorial su come indicizzare, suddividere e manipolare le stringhe
- Lavorare con JavaScript: come funzionano le classi
- Lavorare con JavaScript: come funzionano i prototipi e l'ereditarietà
Buona programmazione!
Commenti
Ancora nessun commento. Scrivi il primo.