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 tietoja vain merkkijonoina, joten kun käsittelet olioita tai taulukoita, ne täytyy muuntaa JSON.stringify()-metodilla ennen tallennusta ja palauttaa takaisin JSON.parse()-metodilla haettaessa.

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

Paikallisen tallennustilan lisääminen

Jotta tehtävät säilyvät myös sivun päivityksen jälkeen, tulee toteuttaa pysyvyys selaimen Local Storage -ominaisuutta hyödyntäen. Tämä tarkoittaa, että sinun tulee opettaa TaskService tallentamaan tehtävät paikalliseen tallennustilaan sekä lataamaan ne sieltä sovelluksen käynnistyessä.

Tehtävien tallentaminen paikalliseen tallennustilaan

Ensin tarvitset metodin, joka ottaa sisäisen tehtävätaulukon ja tallentaa sen selaimen Local Storage -ominaisuuteen.

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.

Joka kerta, kun tehtävä lisätään, poistetaan tai päivitetään, tätä menetelmää kutsutaan varmistaaksemme, että tiedot tallennetaan.

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, se palauttaa tyhjän taulukon uuden aloituksen mahdollistamiseksi.

Tehtävien lataaminen palvelun alustuksessa

Halutaan ladata olemassa olevat tehtävät heti, kun palvelu luodaan. Tämän toteuttamiseksi käytetään palvelun konstruktoria:

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ä meidän täytyy kutsua saveTasks-metodia 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ä antaa sovelluksellemme huomattavasti ammattimaisemman ja luotettavamman käyttökokemuksen.