HTML:n paikallinen tallennus

HTML:n paikallinen tallennus: parempi kuin evästeet.

Mikä on HTML:n paikallinen tallennus?

Paikallisen tallennuksen (Local Storage) avulla web-sovellukset voivat tallentaa tietoja paikallisesti käyttäjän selaimessa.

HTML5:n ennen, sovellustiedot voivat tallentua vain evästeisiin, mukaan lukien jokainen palvelupyynnön. Paikallinen tallennus on turvallisempaa ja voi tallentaa suuria määriä tietoja paikallisesti ilman, että se vaikuttaa verkkosivuston suorituskykyyn.

Eri kuin evästeet, tallennusrajoitukset ovat paljon suuremmat (vähintään 5 MB), eikä tietoja lähetetä palvelimelle.

Paikallinen tallennus tapahtuu alkuperäisestä (origin) (aliverkosta ja protokollasta). Kaikki sivut, alkuperäisestä, voivat tallentaa ja käyttää samaa tietoa.

Selaimen tuki

Taulukossa olevat taulukot osoittavat ensimmäisen selaimen version, joka tukee täysin paikallista tallennusta.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

HTML paikallinen tallennus objekti

HTML paikallinen tallennus tarjoaa kaksi objektia, jotka tallentavat tietoja asiakaspuolella:

  • window.localStorage - tallentaa tietoja ilman eräpäivää
  • window.sessionStorage - tallentaa dataa sessionille (tiedot menetetään, kun selainikkuna suljetaan)

Kun käytät paikallista tallennusta, tarkista localStorage ja sessionStorage selaimen tuki:

if (typeof(Storage) !== "undefined") {
    // localStorage/sessionStorage -koodi
} else {
    // Pahoittelen, Web Storage ei ole tuettu ..
}

localStorage-objekti

localStorage-objekti tallentaa tietoja ilman eräpäivää. Kun selain suljetaan, tiedot eivät poistu, vaan ovat käytettävissä seuraavana päivänä, viikkona tai vuodenaikana.

Esimerkki

// Tallenna
localStorage.setItem("lastname", "Gates");
// Hae
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Kokeile itse

Esimerkki selitys:

  • Luo localStorage nimi/arvo -pari, jossa: name="lastname", value="Gates"
  • Hae "lastname" -arvo ja lisää se id="result" -elementtiin

Esimerkissä voidaan myös kirjoittaa seuraavasti:

// Tallenna
localStorage.lastname = "Gates";
// Hae
document.getElementById("result").innerHTML = localStorage.lastname;

Poista "lastname" localStorage -tietueen syntaxi on seuraava:

localStorage.removeItem("lastname");

Huomautus: Nimi/arvo-pareja tallennetaan aina merkkijonona. Muista muuntaa ne muuksi muodoksi tarvittaessa!

Esimerkki käyttäjän napsautuspainikkeen kerran klikkaamisen määrän laskemisesta. Koodissa merkkijonoarvo muunnetaan arvoksi ja lasketaan määrää edelleen:

Esimerkki

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Olet napsauttanut tätä painiketta " +
localStorage.clickcount + " kertaa.";

Kokeile itse

sessionStorage-objekti

sessionStorage-objekti on sama kuin localStorage-objekti, mutta erona on, että se tallentaa vain yhden session tiedot. Jos käyttäjä sulkee tietyn selaimen välilehden, tiedot poistetaan.

Seuraava esimerkki laskee käyttäjän napsautuksia painikkeeseen tässä sessionissä:

Esimerkki

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Tässä sessionissä olet napsauttanut tätä painiketta " +
sessionStorage.clickcount + " kertaa.";

Kokeile itse