HTML:n paikallinen tallennus

HTML:n paikallinen tallennus: parempi kuin cookies.

Mitä 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 cookieihin, 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 cookie, tallennusrajoitukset ovat paljon suuremmat (vähintään 5MB), eikä tietoja siirretä palvelimelle.

Paikallinen tallennus tapahtuu alkuperäisestä (origin) (alue ja protokolla). 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:n paikallinen tallennus objekti

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

  • window.localStorage - tallentaa tietoja ilman eräpäivää
  • window.sessionStorage - tallentaa dataa sessionille (tiedot katoavat, kun selaimen välilehdet suljetaan)

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

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 vuonna.

Esimerkki

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

Kokeile itse

Esimerkki selityksestä:

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

Edellisessä esimerkissä voit myös kirjoittaa:

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

Poista "lastname" localStorage -projektin syntaksi on seuraava:

localStorage.removeItem("lastname");

Huomautus: Nimi/arvo-paari tallennetaan aina merkkijonona. Jos tarvitset niitä muuntamaan toiseen muotoon, muista tehdä niin!

Esimerkki käyttäjän napsautuspainikkeen kertaa laskemisesta. Koodissa merkkijonoarvo muunnetaan lukuksi ja lasketaan lukuja 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 napsautukset painikkeesta 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