Logo Hpv 4 Learning
Academy
Web Agency
javascript

Come usare il LocalStorage in Javascript

By Hpv4Learning 1 min05/03/2022
"In questo progetto realizzeremo una lista della spesa che non perde i dati quando la pagina viene ricaricata "
To Do List

Troverai nel progetto

Che cosa realizzeremo in questo progetto ?

In questo progetto andremo a realizzare una to-do list, che avrà come peculiarità il fatto di non perdere i dati quando la pagina viene ricaricata. Per ottenere questo obiettivo andremo ad utilizzare il localStorage.

Che cos'è il localStorage ?

Il localStorage è una proprietà che consente ai siti e alle app JavaScript di salvare coppie chiave-valore in un browser Web senza data di scadenza. Ciò significa che i dati memorizzati nel browser rimarranno disponibili anche dopo la chiusura della finestra del browser.

Ci vengono messi a disposizione dei metodi per interagire con questa memoria locale, che sono:

  • setItem(): prende una coppia chiave-valore e la aggiunge a localStorage.
  • getItem(): prende una chiave e restituisce il valore corrispondente.
  • removeItem(): prende una chiave e rimuove la coppia chiave-valore corrispondente.
  • clear(): pulisce il localStorage.

Tramite questi metodi andremo a scrivere delle funzioni che avranno il compito di captare l'input dell'utente e di salvarlo nella memoria locale.

Così facendo, ogni volta che viene aggiunto un item alla lista, viene aggiunto anche nel localStorage, e riaprendo l'applicazione dopo tempo, avremo comunque salvati i valori che abbiamo inserito.

Come creare item in una lista

Per aggiungere item alla nostra lista, andremo ad utilizzare il metodo createElement(), che ci permette di creare un nuovo elemento all'interno del DOM. Andremo inoltre ad aggiungergli un attributo utilizzando il metodo createAttribute()

function createListItem(id, value) {
  const element = document.createElement("article");
  let attr = document.createAttribute("data-id");
  attr.value = id;
  element.setAttributeNode(attr);
  element.classList.add("to-do-item");
  element.innerHTML = `<p class="title">${value}</p>
            <div class="btn-container">
              <!-- edit btn -->
              <button type="button" class="edit-btn">
                <i class="fas fa-edit"></i>
              </button>
              <!-- delete btn -->
              <button type="button" class="delete-btn">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          `;
  }

Prossimo Progetto

Come funziona un API in Javascript

Come funziona un API in Javascript

Una simpatica API per ottenere informazioni sui nostri gatti

javascript

Informazioni aggiuntive

Livello: Principiante

239 lezioni

25 ore di videocorso

11 Progetti pratici

558 studenti iscritti

Voto Medio:

4.5

Prezzo originale: 29.90€

Supporto Premium

text

Scopri il corso completo

Corso di Javascript e Typescript...


558

4.5

Copertina
Corso di Javascript e Types...