A questo punto, la nostra applicazione gestisce le attività solo in memoria. Questo significa che ogni volta che la pagina viene aggiornata, l'intera lista delle attività viene persa.

Per risolvere questo problema e assicurare che le attività vengano salvate tra una sessione e l'altra dell'utente, utilizzeremo il Local Storage — una funzionalità integrata del browser che consente di memorizzare coppie chiave-valore direttamente nel browser dell'utente.

Che cos'è il Local Storage?

I dati memorizzati nel Local Storage non scompaiono quando la pagina o il browser vengono chiusi — rimangono disponibili anche dopo un riavvio completo del browser.

LocalStorage memorizza solo dati come stringhe, quindi quando si lavora con oggetti o array, è necessario convertirli utilizzando JSON.stringify() prima di salvarli e JSON.parse() quando li si recupera.

Ecco i metodi principali utilizzati per interagire con il Local Storage:

Aggiunta del Local Storage

Per garantire che le nostre attività vengano salvate anche dopo un aggiornamento della pagina, è necessario implementare la persistenza utilizzando il Local Storage del browser. Questo significa che bisogna istruire il nostro TaskService su come salvare le attività nel local storage e su come caricarle nuovamente all'avvio dell'applicazione.

Salvataggio delle attività nel Local Storage

Per prima cosa, è necessario un metodo che prenda il nostro array interno di attività e lo memorizzi nel Local Storage del browser.

Ecco come è possibile farlo:

private saveTasks(): void {
  localStorage.setItem('tasks', JSON.stringify(this.tasks));
}

Questo metodo converte l'array tasks in una stringa JSON utilizzando JSON.stringify. Successivamente, memorizza quella stringa in localStorage sotto la chiave tasks.

Ogni volta che un'attività viene aggiunta, eliminata o aggiornata, si richiama questo metodo per garantire che i dati vengano salvati.

Caricamento delle attività da Local Storage

Successivamente, implementeremo un metodo che carica l'elenco delle attività da Local Storage quando il servizio viene inizializzato.

private loadTasks(): Task[] {
  const data = localStorage.getItem('tasks');
  return data ? JSON.parse(data) : [];
}

Questo metodo tenta di recuperare un valore da localStorage utilizzando la stessa chiave tasks.

Se i dati esistono, analizza la stringa JSON e la converte nuovamente in un array TypeScript. Se non c'è nulla in memoria, restituisce un array vuoto per iniziare da zero.

Caricamento delle attività all'inizializzazione del servizio

Vogliamo caricare le attività esistenti non appena il servizio viene creato. Per farlo, utilizziamo il costruttore del servizio:

constructor() {
  this.tasks = this.loadTasks();
}

Questo garantisce che l'array dei task venga immediatamente popolato con eventuali dati salvati precedentemente all'avvio dell'app.

Versione finale di TaskService

Rimane solo da assicurarci che la nostra lista di task venga salvata nella Local Storage ogni volta che avviene una modifica. Questo significa che dobbiamo chiamare il metodo saveTasks alla fine dei metodi addTask, deleteTask e toggleTask per mantenere la Local Storage sincronizzata con la nostra lista tasks.

Ecco come appare il TaskService completo con la funzionalità di local storage:

Implementando saveTasks() e loadTasks() nel nostro servizio, abbiamo permesso al nostro task manager di mantenere i dati tra una sessione e l'altra. Ora, ogni volta che l'utente aggiunge, completa o elimina un'attività, tali modifiche vengono memorizzate nel browser e ripristinate automaticamente alla successiva apertura dell'app.

Questo conferisce alla nostra applicazione un'esperienza utente molto più professionale e affidabile.