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 garantire 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 in Local Storage non vengono eliminati 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() al momento del recupero.

Di seguito sono riportati i principali metodi utilizzati per interagire con Local Storage:

Aggiunta del Local Storage

Per garantire che le attività vengano salvate anche dopo un aggiornamento della pagina, è necessario implementare la persistenza utilizzando il Local Storage del browser. Questo significa che occorre configurare il nostro TaskService affinché salvi le attività nel local storage e le carichi nuovamente all'avvio dell'applicazione.

Salvataggio delle attività nel Local Storage

Per prima cosa, è necessario un metodo che prenda l'array interno delle attività e lo memorizzi nel Local Storage del browser.

Ecco come procedere:

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 assicurarsi che i dati vengano salvati.

Caricamento delle attività da Local Storage

Successivamente, verrà implementato un metodo che carica l'elenco delle attività da Local Storage all'inizializzazione del servizio.

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

Si desidera caricare le attività esistenti non appena il servizio viene creato. Per fare ciò, si utilizza 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'applicazione.

Versione finale di TaskService

Rimane solo da assicurarsi che la lista dei task venga salvata su Local Storage ogni volta che si verifica una modifica. Questo significa che è necessario chiamare il metodo saveTasks alla fine dei metodi addTask, deleteTask e toggleTask per mantenere Local Storage sincronizzato 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 al successivo accesso all'app.

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