Tietojen säilyttäminen

Sovellus on siinä vaiheessa, että toiminnallisuudesta puuttuu enää pelitietojen säilyttäminen niin, että ne eivät katoa sivupäivityksen yhteydessä. Selainsovelluksille on tarjolla monta erilaista tapaa tietojen säilyttämiseen. Näistä yksinkertaisimmasta päästä on HTML5-standardissa määritelty localStorage.

localStorage mahdollistaa pienten tietomäärien tallentamisen päätelaitteeseen niin, että niihin pääsee käsiksi aina tarvittaessa. Sillä on seuraavat ominaisuudet:

• Tieto tallennetaan paikallisesti käyttäjän selaimen sisällä.
• Tietoja ei koskaan siirretä palvelimelle toisin kuin evästeet (cookies).
• Varattu tallennustila on vähintään 5 megatavua, mikä riittää pitkälle pelkän tekstitiedon tallentamiseen.
• Tallennus tapahtuu sivustokohtaisesti, samasta domainosoitteesta (ja portista) ladatut sivut pääsevät käsiksi tallentamaansa tietoon.

localStoragen käyttö on hyvin suoraviivaista. Sillä on yksi funktio, jolla tiedon voi tallentaa.

localStorage.setItem('luku','42');

Tallennus tapahtuu nimi- ja arvopareina. Esimerkiksi edellä oleva koodirivi tallentaa luku-nimellä merkkijonon 42. Arvo tallennetaan aina merkkijonona.

Tällä tavalla tallennettu arvo säilyy selaimen muistissa vaikka sivun sisältö päivitettäisiin tai selain suljettaisiin välissä.

localStorageen tallennettu arvo luetaan puolestaan omalla funktiolla.

let arvo = localStorage.getItem('luku');

Tämän jälkeen arvoa voidaan käyttää sovelluksessa aivan samalla tavalla kuin mitä tahansa muuta merkkijonoa. Jos tallennettu sisältö on jokin muu kuin merkkijono, silloin arvo täytyy muuttaa ko. muotoon. Tähän tulemme tutustumaan tarkemmin sovelluksen toteutuksessa.

Näiden lisäksi tallennetun arvon voi myös poistaa muistista.

localStorage.removeItem('luku');

Tätä toiminnallisuutta tulemme seuraavaksi hyödyntämään pelin tietojen tallennuksessa. Jotta tallennus olisi tapahtuisi vielä mutkattomammin, niin yhdistämme aikaisemmin käyttämämme useState-muuttujan ja localStorage-toiminnallisuuden yhdeksi kokonaisuudeksi ja toteutamme siitä ns. React Hooks -funktion.