Local Storage e Javascript: Come utilizzare il contenuto delle variabili in più pagine
Tuttavia, anche senza alcun tipo di database, possiamo utilizzare l'archiviazione locale integrata in un browser Web per salvare le cose da fare. Questo potrebbe essere effettivamente utile per prendere appunti rapidi. Imposta l'app come pagina "nuova scheda" nel browser e le cose da fare persistono sul tuo computer locale finché non cancelli la cache.
Questo è quello che impareremo a fare oggi.
- Conoscenza di base di HTML e CSS .
- Conoscenza di base della sintassi JavaScript e dei tipi di dati .
- Conoscenze di base per lavorare con il DOM (facoltativo). L'articolo Come connettersi a un'API ti insegnerà come creare una semplice app Web, altrimenti puoi imparare anche con questo piccolo tutorial.
- Crea un'applicazione "nuova scheda" che memorizza le cose da fare localmente nella memoria locale del browser e le visualizza sul front-end. Vedi esempio .
L'archiviazione Web è un dato archiviato localmente nel browser dell'utente. Esistono due tipi di archiviazione Web:
- Memoria locale : dati senza data di scadenza che persistono dopo la chiusura della finestra del browser.
- Memoria sessioni : dati che vengono cancellati dopo la chiusura della finestra del browser.
Ciò è utile per salvare dati come le preferenze dell'utente (tema di colore chiaro o scuro su un sito Web), ricordare gli articoli del carrello o ricordare che un utente ha effettuato l'accesso a un sito Web.
In precedenza, i cookie erano l'unica opzione per ricordare questo tipo di dati locali temporanei. L'archiviazione locale ha un limite di archiviazione significativamente più elevato (5 MB contro 4KB) e non viene inviato con ogni richiesta HTTP, quindi può essere un'opzione migliore per l'archiviazione sul lato client.
Ecco una panoramica dei
localStoragemetodi.| Metodo | Descrizione |
|---|---|
setItem() | Aggiungi chiave e valore alla memoria locale |
getItem() | Recupera un valore con la chiave |
removeItem() | Rimuovi un elemento per chiave |
clear() | Cancella tutto lo spazio di archiviazione |
Puoi provare cosa c'è nell'archiviazione locale andando alla console JavaScript e digitandolo. In realtà, non limitarti a leggerlo.
localStorageStorage {length: 0}
Aggiungere alcuni dati a
localStorageè facile come usare il setItem()metodo. Userò una chiave generica e un valore per i nomi, ma possono essere qualsiasi stringa.localStorage.setItem('key', 'value')
Ora, se
localStorageesegui nuovamente il test nella console, troverai la tua nuova chiave e valore.Storage {key: "value", length: 1}
Se vuoi ottenere il valore per una chiave particolare, utilizzerai il
getItem()metodo.localStorage.getItem('key')value
Infine, puoi rimuovere i dati con
removeItem().localStorage.removeItem('key')
L'uso
clear()cancella tutta la memoria locale.localStorage.clear()
Ora possiamo iniziare a configurare l'app.
Innanzitutto, creeremo un semplice front-end HTML con index.html . Sto caricando in Primitive (il mio framework CSS minimalista) per gli stili, perché è quello che uso sempre quando ho bisogno di un front-end rapido.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>New Tab App</title>
<link rel="stylesheet" href="https://unpkg.com/primitive-ui/dist/css/main.css" />
</head>
<body>
<div class="small-container">
<h1>New Tab App</h1>
<!-- more will go here -->
</div>
<script src="js/scripts.js"></script>
</body>
</html>
Installeremo tre cose:
- Un input di testo - per aggiungere nuovi elementi.
- Un elenco - in cui gli elementi verranno aggiunti sul front-end.
- Un pulsante : per cancellare tutti gli elementi.
Aggiungi questo codice dove è il commento "più andrà qui".
index.html
<form>
<input id="item" type="text" placeholder="New" required />
</form>
<h2>Items</h2>
<ul></ul>
<button>Clear All</button>
Ecco come appare:
E questo è tutto per il front-end. Da qui, ci concentreremo sull'aggiunta di funzionalità con JavaScript.
L'HTML qui presentato è semplificato a fini dimostrativi e non tiene conto dei problemi di accessibilità.
Impostazione della funzionalità JavaScript
Prima di integrarlo nella memoria locale, facciamo in modo che il modulo e l'elenco funzionino: vogliamo che tutto ciò che inviamo venga
inputvisualizzato in ul.
Innanzitutto, imposterò alcune variabili per gli elementi nella pagina: il modulo, l'elenco non ordinato, il pulsante e l'inserimento di testo.
scripts.js
const form = document.querySelector('form')
const ul = document.querySelector('ul')
const button = document.querySelector('button')
const input = document.getElementById('item')
Successivamente, farò una funzione che crea un
lielemento, poiché lo farò più di una volta. Chiamerò la funzione liMaker(). Crea solo un lielemento, imposta il testo dell'elemento sul parametro e aggiunge l'elemento dell'elenco a ul.
scripts.js
const liMaker = text => {
const li = document.createElement('li')
li.textContent = text
ul.appendChild(li)
}
Aggiungerò un listener di eventi al modulo che controlla un evento di invio, che sarà ogni volta che premi invio sul modulo. Il
e.preventDefault()impedirà il modulo dal default presentare azione, che non vogliamo, visto che non stiamo inviando i dati a un server.
Al contrario, il modulo invierà il valore di
input. Chiameremo la liMaker()funzione, che creerà l'elemento con il testo del inputvalore e lo aggiungerà al DOM. Infine, imposteremo il inputvalore su una stringa vuota in modo da non dover cancellare l'ultimo elemento inserito manualmente.
scripts.js
form.addEventListener('submit', function(e) {
e.preventDefault()
liMaker(input.value)
input.value = ''
})
Ora con poche righe di codice irrisorie, abbiamo una piccola app che aggiunge elementi da fare a un elenco.
Dal momento che non salviamo gli elementi da nessuna parte, quando chiudi o aggiorni il browser, gli elementi spariranno. Il passaggio finale consiste nell'integrarlo nella memoria locale in modo che i dati persistano.
Ora aggiungeremo alcune ulteriori funzionalità all'app. In primo luogo, ogni volta che viene inviato il modulo, il
inputvalore deve essere aggiunto localStoragee visualizzato sul front-end. Vorremmo anche scorrere tutti gli elementi di archiviazione locale esistenti e visualizzarli in cima all'elenco. Infine, vogliamo che il pulsante "Cancella tutto" rimuova tutti gli elementi dalla memoria locale e dal front-end.
Creiamo un array vuoto per iniziare e creiamo una
localStoragechiave chiamata "items". Ora localStoragesupporta solo le stringhe come valori e desidera memorizzare le nostre cose da fare in un array.
Possiamo aggirare il problema usando
JSON.stringify()per convertire un array di dati in una stringa. Useremo JSON.parse()per convertire il contenuto di localStorageback in qualcosa con cui possiamo lavorare più avanti nella datavariabile. Inserisci questo codice sotto tutte le dichiarazioni costanti che abbiamo impostato in precedenza.
scripts.js
// other constant declarations here
let itemsArray = []
localStorage.setItem('items', JSON.stringify(itemsArray))
const data = JSON.parse(localStorage.getItem('items'))
Nel listener di eventi del modulo, inseriamo qualsiasi nuovo
inputvalore nell'array, quindi impostiamo localStorageil nuovo valore aggiornato.
scripts.js
// form event listener here
e.preventDefault()
itemsArray.push(input.value)
localStorage.setItem('items', JSON.stringify(itemsArray))
Analizzeremo tutto nella nostra
datavariabile sopra, che contiene tutti i localStoragedati esistenti in un formato che JavaScript può comprendere e con cui lavorare, e eseguiremo di liMaker()nuovo. Questo mostrerà tutte le informazioni memorizzate esistenti sul front-end ogni volta che apriamo l'app.
scripts.js
data.forEach(item => {
liMaker(item)
})
Infine, aggiungeremo un evento clic al pulsante che cancellerà tutti i dati
localStorage, oltre a rimuovere ogni nodo figlio da ul.
scripts.js
button.addEventListener('click', function() {
localStorage.clear()
while (ul.firstChild) {
ul.removeChild(ul.firstChild)
}
})
Se tutto è andato bene, tutto verrà salvato nella memoria e apparirà sul front-end, che puoi verificare testando
localStoragenella console.Storage {items:
"["Welcome","to","the","Thunderdome"]",
length: 1}
C'è un ultimo problema: dopo aver chiuso il browser o ricaricato la pagina, tutte le informazioni esistenti
localStoragesono sparite e nulla rimane sul front-end. Perché?
Il nostro
itemsArrayviene reimpostato su un array vuoto ogni volta che viene eseguito lo script. Potremmo risolvere questo problema facendo una dichiarazione condizionale che controlla se localStorageesiste già, come nell'esempio seguente.
scripts.js
let items
if (localStorage.getItem('items')) {
items = JSON.parse(localStorage.getItem('items'))
} else {
items = []
}
Un po 'più conciso sarebbe usare un operatore ternario per fare la stessa cosa.
scripts.js
let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : []
Con ciò, la nostra app è completa! Ora quando si inseriscono alcune informazioni e si aggiorna o si chiude la finestra del browser, i dati persistono fino a quando non si cancellano manualmente i dati in Strumenti di sviluppo (in Applicazione -> Archiviazione) o eseguendo il
localStorage.clear()comando. Ecco il codice JavaScript completo.
scripts.js
const form = document.querySelector('form')
const ul = document.querySelector('ul')
const button = document.querySelector('button')
const input = document.getElementById('item')
let itemsArray = localStorage.getItem('items') ? JSON.parse(localStorage.getItem('items')) : []
localStorage.setItem('items', JSON.stringify(itemsArray))
const data = JSON.parse(localStorage.getItem('items'))
const liMaker = text => {
const li = document.createElement('li')
li.textContent = text
ul.appendChild(li)
}
form.addEventListener('submit', function(e) {
e.preventDefault()
itemsArray.push(input.value)
localStorage.setItem('items', JSON.stringify(itemsArray))
liMaker(input.value)
input.value = ''
})
data.forEach(item => {
liMaker(item)
})
button.addEventListener('click', function() {
localStorage.clear()
while (ul.firstChild) {
ul.removeChild(ul.firstChild)
}
})
Ecco di nuovo la demo e il codice sorgente.
In questo tutorial, abbiamo imparato come creare una semplice applicazione basata su cose da fare che può essere potenzialmente utilizzata per tenere note rapide come una nuova scheda utilizzando l'archiviazione Web HTML5. Spero che tu abbia una migliore comprensione dell'archiviazione locale e di come integrarla in una semplice app ora! Per favore condividi questo articolo se lo hai trovato utile in modo che anche altri possano trarne beneficio.
Commenti
Posta un commento