Local Storage e Javascript: Come utilizzare il contenuto delle variabili in più pagine








Local Storage e Javascript: Come utilizzare il contenuto delle variabili in più pagine

Ecco una piccola applicazione completamente da zero con un semplice JavaScript. Un elenco di cose da fare è un'idea comune per le app, ma senza un database per archiviare le cose da fare, non è particolarmente utile e ciò aggiunge un po 'di complessità oltre il territorio per principianti.

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.

Prerequisiti

obiettivi

  • 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 .

Panoramica dell'archiviazione Web

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.
MetodoDescrizione
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.
localStorage
Storage {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.

Impostazione del front-end

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 inputChiameremo 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.

Integrazione dell'archiviazione locale

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.

Conclusione

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