Tässä vaiheessa sovelluksemme hallitsee tehtäviä vain muistissa. Tämä tarkoittaa, että aina kun sivu päivitetään, koko tehtävälista katoaa.

Tämän korjaamiseksi ja tehtävien säilyttämiseksi käyttäjäistuntojen välillä käytämme Local Storagea — selaimen sisäänrakennettua ominaisuutta, jonka avulla voit tallentaa avain-arvo -pareja suoraan käyttäjän selaimeen.

Mikä on Local Storage?

Local Storage -muistiin tallennettu data ei katoa, kun sivu tai selain suljetaan — se säilyy käytettävissä myös selaimen uudelleenkäynnistyksen jälkeen.

LocalStorage tallentaa tiedot vain merkkijonoina, joten kun käsitellään olioita tai taulukoita, ne täytyy muuntaa JSON.stringify()-menetelmällä ennen tallennusta ja palauttaa JSON.parse()-menetelmällä haettaessa.

Tässä ovat pääasialliset metodit, joilla Local Storagea käytetään:

Paikallisen tallennuksen lisääminen

Jotta tehtävät säilyvät myös sivun päivityksen jälkeen, tulee ottaa käyttöön pysyvyys selaimen Local Storage -ominaisuudella. Tämä tarkoittaa, että TaskService-palvelulle täytyy opettaa, miten tehtävät tallennetaan paikalliseen tallennustilaan ja miten ne ladataan takaisin sovelluksen käynnistyessä.

Tehtävien tallentaminen Local Storageen

Tarvitset ensin menetelmän, joka ottaa sisäisen tehtävätaulukon ja tallentaa sen selaimen Local Storage -tilaan.

Näin se onnistuu:

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

Tämä menetelmä muuntaa tasks-taulukon JSON-merkkijonoksi käyttäen JSON.stringify-funktiota. Sen jälkeen se tallentaa tämän merkkijonon localStorage-muistiin avaimella tasks.

Aina kun tehtävä lisätään, poistetaan tai päivitetään, tätä menetelmää kutsutaan, jotta tiedot tallentuvat.

Tehtävien lataaminen Local Storagesta

Seuraavaksi toteutetaan menetelmä, joka lataa tehtävälistan Local Storagesta palvelun alustuksen yhteydessä.

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

Tämä menetelmä yrittää hakea arvon localStorage:sta käyttäen samaa avainta tasks.

Jos dataa löytyy, se jäsentää JSON-merkkijonon takaisin TypeScript-taulukoksi. Jos tallennustilassa ei ole mitään, palautetaan tyhjä taulukko uuden aloitusta varten.

Tehtävien lataaminen palvelun alustuksessa

Haluamme ladata olemassa olevat tehtävät heti, kun palvelu luodaan. Tämän teemme palvelun konstruktorissa:

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

Tämä varmistaa, että tasks-taulukko täyttyy välittömästi kaikilla aiemmin tallennetuilla tiedoilla sovelluksen käynnistyessä.

TaskService-luokan lopullinen versio

Jäljellä on vain varmistaa, että tehtävälista tallennetaan Local Storageen aina, kun muutoksia tapahtuu. Tämä tarkoittaa, että saveTasks-metodia tulee kutsua addTask-, deleteTask- ja toggleTask-metodien lopussa, jotta Local Storage pysyy synkronoituna tasks-listan kanssa.

Alla on esimerkki täydellisestä TaskService-luokasta, jossa on local storage -toiminnallisuus:

Ottamalla käyttöön saveTasks() ja loadTasks() palvelussamme, olemme mahdollistaneet tehtävienhallintasovelluksen tietojen säilyttämisen istuntojen välillä. Nyt aina, kun käyttäjä lisää, merkitsee valmiiksi tai poistaa tehtävän, muutokset tallennetaan selaimeen ja palautetaan automaattisesti seuraavalla käyttökerralla.

Tämä parantaa sovelluksemme ammattimaisuutta ja luotettavuutta huomattavasti.