HTML5 Web Storage – Tároljuk okosan

English Version!

A HTML5-ben bevezetésre kerülő kliens oldali adattároló modul (Web Storage) bemutatására törekszek ebben a cikkben. Természetesen nem fogja megváltani a világot – hisz a “felhő” óta tudjuk, hogy az fogja -, de ettől függetlenül egy nagyszerű lehetőséget biztosít, amit eddig csak különböző trükkökkel tudtunk megoldani (Pl. Cookie (süti)). De a süti számos hátránnyal járt (korlátos méret 4KB, +adatforgalom a kérésenkénti küldés miatt, stb.). Nos, ezzel szemben a HTML5 web storage a jelenlegi definíció szerint 5MB adatot tud tárolni és ráadásul forrásonként. Ide azért már pakolhatunk adatot bőven. Az is fontos, hogy itt már nem keletkezik plusz felesleges adatforgalom, hiszen nem küldözgeti az adatokat, csak ha kérjük. (azért nem illik 5Mb-os storage-eket készíteni)

Maga a Web Storage az adatokat kulcs – érték páros formájában tárolja el és ennek segítségével tudjuk azokat visszakeresni. A kulcs típusa szöveges, míg az érték típusa bármi lehet. Nézzük, milyen “fajtái” vannak:

1. Session Storage

Az ide kerülő adatokat a böngészési Session végéig tárolja, utána törlésre kerülnek (ez hivatott kiváltani a Cookie -kat). Amennyiben az adatok később nem lesznek fontosak számunkra, vagy a felhasználó számára, érdemes ezt a megoldást választani az erőforrások megtakarítása végett.

2. Local Storage

Az ide kerülő adatokkal már más a helyzet, ezeket egészen addig megmaradnak, amíg nem töröljük a kulcs-érték párokat, vagy a felhasználó nem törli azokat a böngészőjével. Hogy miért is jó ez? Nos, pl. ha a felhasználó egy új ablakot nyit, akkor is eléri az itt tárolt adatokat, vagy ha kilép a böngészőből és újra belép, akkor is elérhetőek maradnak.

Használatuk

Azért nem bontom őket nagyon két részre, mert egy API-ból táplálkoznak, azaz, ugyanazokkal a függvényekkel és tulajdonságokkal rendelkeznek, ráadásul az adatok tárolásának és elérésnek a módja is megegyezik. Lássuk, melyek a Storage használatához szükséges függvények:

  • clear()A Storage-ünk tartalmát tudjuk kiüríteni vele.
  • getItem(key)Visszaadja a paraméterbe kapott kulcshoz tartozó értéket.
  • key(index)Visszaadja a megadott index-hez tartozó kulcsot.
  • length – Visszaadja a tárolt kulcs-érték párok számát.
  • removeItem(key) – A Storage-ben lévő adott kulcsú adat eltávolítására szolgál.
  • setItem(key,value)Ezen függvénnyel tudunk adatot tárolni a Storage-ban.

A Storage Event – valami változott

Ha a weboldalunkhoz tartozó új adatot tárolunk (setItem), eltávolítunk adatot (removeItem) vagy töröljük a Storage tartalmát (clear) kiváltunk egy onStorage event-et, ami a következő értékekkel tér vissza:

  • storageArea – Session vagy Local
  • key – a kulcs ami változik
  • oldValue – régi értéke
  • newValue – az új értéke
  • url – az oldal URL-je, melynek a kulcsa megváltozott.

A gyakorlatban

Elsőnek nézzük meg, hogyan tudjuk egy egyszerű Script segítségével megnézni, hogy a böngészőnk támogatja-e a Web Storage funkciót.

function supportsLocalStorage() {
    return ('localStorage' in window) && window['localStorage'] !== null;
}

if(supportsLocalStorage()) {
    // Web Storage meghívása itt
}
else {
    alert('A Web Storage nem támogatott');
}

Ha támogatja, akkor a “Web Storage meghívása itt” részt bővíthetjük a set/get/remove/clear elemekkel:

//
// Adat tárolása
//
sessionStorage.setItem('kulcs','érték'); //session storage esetén
localStorage.setItem('kulcs','érték'); //local storage esetén
//rövid alakja
sessionStorage.kulcs="érték";
localStorage.kulcs="érték";
//
//Adat kiolvasás
//
sessionStorage.getItem("kulcs"); //vissza térési értéke a kulcshoz tartozó "érték"
localStorage.getItem("kulcs"); //vissza térési értéke a kulcshoz tartozó "érték"
//rövid alakja
sessionStorage.kulcs;
localStorage.kulcs;
//
//Adat törlés
//
sessionStorage.removeItem("kulcs"); // eltávolítja a kulcs-ot és a hozzá tartozó értéket
localStorage.removeItem("kulcs");
//
//Storage teljes törlés
//
sessionStorage.clear();
localStorage.clear();

Most nézzünk két egyszerű példát a fentiekre, lolcalStorage és sessionStorage bontásban. A példánkban bekérjük a felhasználó nevét, mindezt egy egyszerű form segítségével, majd lehetőséget biztosítunk a Storage-ben tárolt adat lekérdezésére is. A példákat nem látom el kommentárral, mert próbáltam beszédes nevet adni mindennek. Kezdjük a localStorage-el.

<!DOCTYPE html>
<html>
<head>
<title> Local Storage </title>
</head>
<body>

<script>
function adatbe() {
var nev = document.egyszeruform.Name.value;
localStorage.firstname = nev;
}

function adatki() {
alert(localStorage.firstname);
}
</script>

<div align="center">
<p> Mi a neved? Emlékezni fogok rá!</p>
 <form name="egyszeruform">
  <input type="text" name="Name" />
  <input type="submit" onclick="adatbe()" />
  <input type="button" id="" value="Lekérdez" onclick="adatki()" />
 </form>
</div>
</body>
</html>

A működő példa itt kipróbálható.

Nézzük ugyanezt sessionStorage-el.

<!DOCTYPE html>
<html>
<head>
<title> Session Storage </title>
</head>

<body>
<script>

function adatbe() {
var nev = document.egyszeruform.Name.value;
sessionStorage.firstname = nev;
}

function adatki() {
alert(sessionStorage.firstname);
}

</script>
<div align="center">
<p> Mi a neved? Emlékezni fogok rá, de csak amíg be nem zársz!</p>
<form name="egyszeruform">
<input type="text" name="Name" />
<input type="submit" onclick="adatbe()" />
<input type="button" id="" value="Lekérdez" onclick="adatki()" />
</form>

</div>
</body>
</html>

A működő példa itt kipróbálható.

Ha jól megnézitek a két példát, összesen 2 szó különbség van köztük. Ebből is jól látszik, hogy a használatuk nem tér el.

Most nézzünk egy másik példát. Készítsünk egy egyszerű számlálót, ami oldalbetöltésenként hozzáad 1-et az aktuális localStorage és sessionStorage értékhez. Valamint tegyünk hozzá egy törlés gombot is, hogy a végén törölhessük a storage-ünket.

<!DOCTYPE html>
<html>
<head>
<title>Web Storage Demo</title>
</head>

<body>
<h1>Láttam már? Node hányszor?</h1>
<p>localStorage - Oldalbetöltések száma: <span id="localdarab">0</span> db</p>
<p>sessionStorage - Oldalbetöltések száma: <span id="sessiondarab">0</span> db</p>

<script type="text/javascript">
if (!localStorage.oldalbetoltes) //localStorage létrehozása, nullázása és oltalbetöltésenként +1 hozzáadása
localStorage.oldalbetoltes= 0;
localStorage.oldalbetoltes= 1 + parseInt(localStorage.oldalbetoltes);
document.getElementById('localdarab').innerHTML = localStorage.oldalbetoltes; //localdarab-ba eltesszük

if (!sessionStorage.oldalbetoltes) //sessionStorage létrehozása, nullázása és oltalbetöltésenként +1 hozzáadása
sessionStorage.oldalbetoltes= 0;
sessionStorage.oldalbetoltes= 1 + parseInt(sessionStorage.oldalbetoltes);
document.getElementById('sessiondarab').innerHTML = sessionStorage.oldalbetoltes; //sessiondarab-ba eltesszük

function slclear() { //Local- és SessionStorage törlése egy gomb segítségével
sessionStorage.clear();
localStorage.clear();
}
</script>

<p>Párszor frissíts rá az oldalra majd zárd be és nyisd meg újra a post-ból. Láthatod, hogy a localstorage megőrizte a tartalmát, a sessionstorage
pedig elvesztette azt.</p>
<input type="button" value="Törlés" onclick="slclear();" />

</body>
</html>

A működő példa itt kipróbálható.

Remélem segített mindenkinek megérteni a localStorage és a sessionStorage használatát. A következő részben egy egyszerű Tennivalók listát készítünk localStorage segítségével. Tudom, hogy számtalan jelent már meg az Interneten, de hátha fel tudjuk picit dobni a régi kliséket.

Forrás:

http://www.whatwg.org/specs/web-apps/current-work/multipage/webstorage.html#webstorage

Creative Commons Licenc
HTML5 Web Storage – Tároljuk okosan  a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.

Permissions beyond the scope of this license may be available at https://html5.ugyesen.com.