Come usare il LocalStorage in Javascript

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>
          `;
  }