Il meccanismo localStorage fornisce un tipo di oggetto di archiviazione Web che consente di archiviare e recuperare i dati nel browser. È possibile archiviare e accedere ai dati senza scadenza; i dati saranno disponibili anche dopo che un visitatore chiude il tuo sito.
Normalmente accedi a localStorage usando JavaScript. Con una piccola quantità di codice, puoi creare un progetto di esempio, come un contatore di punteggi. Questo mostrerà come archiviare e accedere ai dati persistenti utilizzando solo il codice lato client.
Che cos'è localStorage in JavaScript?
L'oggetto localStorage fa parte dell'API di archiviazione Web supportata dalla maggior parte dei browser Web. Puoi archiviare i dati come coppie chiave-valore utilizzando localStorage. Le chiavi e i valori univoci devono essere nel formato stringa DOM UTF-16.
Se vuoi archiviare oggetti o array, dovrai convertirli in stringhe usando il file JSON.stringify() metodo. Puoi archiviare fino a 5 MB di dati in localStorage. Inoltre, tutte le finestre con la stessa origine possono condividere i dati localStorage di quel sito.
Un browser non cancellerà questi dati anche quando un utente lo chiude. Sarà disponibile per il sito Web che lo ha creato durante qualsiasi sessione futura. Tuttavia, non dovresti usare localStorage per i dati sensibili poiché altri script in esecuzione sulla stessa pagina possono accedervi.
archiviazione locale vs. SessionStorage
Il localStorage e sessionStorage gli oggetti fanno parte dell'API di archiviazione Web che archivia le coppie chiave-valore in locale. Tutti i browser moderni li supportano entrambi. Con localStorage, i dati non scadono anche dopo che un utente chiude il browser. È diverso da sessionStorage che cancella i dati al termine della sessione della pagina. Una sessione di pagina termina quando chiudi una scheda o una finestra.
Il codice utilizzato in questo progetto è disponibile in a Archivio GitHub ed è gratuito per l'uso con la licenza MIT. Se vuoi dare un'occhiata a una versione live del progetto del contatore dei punteggi, puoi dare un'occhiata al live demo.
Come funziona localStorage?
È possibile accedere alla funzionalità localStorage tramite il Window.localStorage proprietà. Questa proprietà fornisce diversi metodi come setItem(), getItem() e removeItem(). Puoi usarli per archiviare, leggere ed eliminare coppie chiave/valore.
Come archiviare i dati in localStorage
È possibile archiviare i dati in localStorage utilizzando il file setItem() metodo. Questo metodo accetta due argomenti, la chiave e il valore corrispondente.
window.localStorage.setItem('Pitone', 'Guido van Rossum');Qui, Pitone è la chiave e Guido van Rossum è il valore. Se vuoi memorizzare un array o un oggetto, dovrai convertirlo in una stringa. Puoi convertire un array o un oggetto in una stringa usando il comando JSON.stringify() metodo.
finestra.localStorage.setItem('Python', 'Guido van Rossum');cost studente = {
nome: "Yuvraj",
segni: 85,
oggetto: "Apprendimento automatico"
}
cost punteggi = [76, 77, 34, 67, 88];
finestra.localStorage.setItem('risultato', JSON.stringify (studente));
finestra.localStorage.setItem('marks', JSON.stringify (partiture));
Come leggere i dati da localStorage
Puoi leggere i dati da localStorage usando il file getItem() metodo. Questo metodo accetta la chiave come parametro e restituisce il valore come stringa.
permettere dati1 = finestra.localStorage.getItem('Python');
permettere dati2 = finestra.localStorage.getItem('risultato');
consolle.log (dati1);
consolle.log (dati2);
Questo produce il seguente output:
Guido van Rossum
{"nome":"Yuvraj","segni":85,"materia":"Apprendimento automatico"}Se vuoi convertire il risultato da una stringa in un oggetto, dovresti usare il JSON.parse() metodo.
permettere dati2 = JSON.analisi(finestra.localStorage.getItem('risultato'));
consolle.log (dati2);Come eliminare le sessioni di archiviazione locale
È possibile eliminare le sessioni di localStorage utilizzando il file Rimuovi oggetto() metodo. Devi passare la chiave come parametro a questo metodo per eliminare la coppia chiave-valore. Se la chiave esiste, il metodo eliminerà la coppia chiave-valore e se la chiave non esiste, il metodo non farà nulla.
window.localStorage.removeItem('Pitone');
window.localStorage.removeItem('C++');Come cancellare tutti gli elementi in localStorage
Puoi cancellare tutti gli elementi nella memoria locale utilizzando il chiaro() metodo. Non è necessario passare alcun parametro a questo metodo.
finestra.memoria locale.chiaro();Come trovare la lunghezza di localStorage
Puoi trovare la lunghezza di localStorage usando il file localStorage.length proprietà.
permettere len = localStorage.length;
consolle.log (len);Come ottenere la chiave in una determinata posizione
Puoi ottenere la chiave su una determinata posizione usando il chiave() metodo. Questo metodo accetta l'indice come parametro.
permettere d = localStorage.key(1);
consolle.log (d);Il metodo key() viene utilizzato principalmente per scorrere tutti gli elementi in localStorage.
Come scorrere tutti gli elementi in localStorage
Puoi scorrere tutti gli elementi in localStorage usando un ciclo for.
per (permettere io = 0; i < localStorage.length; i++){
permettere chiave = localStorage.key (i);
permettere valore = localStorage.getItem (chiave);
consolle.log (chiave, valore);
}Il metodo key() accetta l'indice come argomento e restituisce la chiave corrispondente. Il metodo getItem() accetta la chiave come argomento e restituisce il valore corrispondente. Infine, il console.log() il metodo stampa la coppia chiave-valore.
Progetto JavaScript semplice basato su localStorage
Con una comprensione dei suoi metodi di base, puoi sviluppare un semplice progetto JavaScript basato su localStorage. In questo progetto, creerai un'app per il conteggio dei punteggi che aumenterà e diminuirà il conteggio dei punteggi in base al clic di un pulsante. Inoltre, implementerai la funzionalità per cancellare tutti gli elementi in localStorage.
Creare un indice.html e script.js file in una nuova cartella e apri i file nel tuo editor di codice preferito. Usa il seguente codice HTML per creare un'interfaccia per l'app del contatore dei punteggi:
<!DOCTYPE html>
<html>
<corpo>
<h1>localStorage in JavaScript</h1>
<pulsante clic ="aumentareContatore()" tipo="pulsante">Aumenta il punteggio</button>
<pulsante clic ="riduciContatore()" tipo="pulsante">Diminuisci il punteggio</button>
<pulsante clic ="chiaroContatore()" tipo="pulsante">Cancella localStorage</button>
<p>Punto:</p>
<p id="punto"></p>
<p>Clicca sul "Aumenta il punteggio" pulsante per aumentare il conteggio dei punteggi</p>
<p>Clicca sul "Diminuisci il punteggio" pulsante per diminuire il conteggio dei punteggi</p>
<p>Clicca sul "Cancella localStorage" per cancellare il localStorage</p>
<p>
Puoi chiudere la scheda del browser (o finestra), e Tentativo ancora.
Vedrai che i dati persistono ancora eènon perso anche dopo la chiusura
il browser.
</p>
<sorgente dello script="script.js"></script>
</body>
</html>Questa pagina contiene tre pulsanti: Aumenta il punteggio, Diminuisci il punteggio, e Cancella localStorage. Questi pulsanti chiamano il aumentareContatore(), riduciContatore(), e chiaroContatore() rispettivamente funzioni. Usa il codice seguente per aggiungere funzionalità all'app del contatore dei punteggi usando JavaScript.
funzioneaumentareContatore() {
var contare = Numero(finestra.localStorage.getItem("conteggio"));
contare += 1;
window.localStorage.setItem("contare", contare);
document.getElementById("punto").innerHTML = conteggio;
}Il aumentareContatore() La funzione recupera il conteggio utilizzando il metodo getItem(). Converte il risultato in un numero, poiché getItem() restituisce una stringa e la memorizza nella variabile count.
La prima volta che fai clic su Aumenta il punteggio il pulsante sarà prima di qualsiasi chiamata a setItem(). Il tuo browser non troverà il contare chiave in localStorage, quindi restituirà un valore nullo. Poiché la funzione Number() restituisce 0 per un input nullo, non necessita di alcuna gestione delle maiuscole speciali. Il codice può aumentare in sicurezza il valore del conteggio prima di memorizzarlo e aggiornare il documento per visualizzare il nuovo valore.
funzionediminuireContatore() {
var contare = Numero(finestra.localStorage.getItem("conteggio"));
contare -= 1;
window.localStorage.setItem("contare", contare);
document.getElementById("punto").innerHTML = conteggio;
}Il riduciContatore() la funzione recupera e controlla i dati proprio come aumentareContatore() fa. Decrementa il contare variabile per 1, che per impostazione predefinita è 0.
funzionechiaroContatore() {
finestra.memoria locale.chiaro();
document.getElementById("punto").innerHTML = "";
}Ultimo, il chiaroContatore() La funzione elimina tutti i dati da localStorage utilizzando il file chiaro() metodo.
Fai di più con localStorage
L'oggetto localStorage ha diversi metodi tra cui setItem(), getItem(), removeItem() e clear(). Sebbene localStorage sia facile da usare, non è sicuro archiviare informazioni riservate. Ma è una buona scelta sviluppare progetti che non richiedono molto spazio di archiviazione e non implicano informazioni sensibili.
Vuoi creare un altro progetto JavaScript basato su localStorage? Ecco un'app di base per l'elenco delle cose da fare che puoi sviluppare utilizzando HTML, CSS e JavaScript.
