< JavaScript

Adattárolás

Szerző: Sallai András

Copyright © 2013, Sallai András

Licenc: GNU Free Documentation License 1.3

Web: https://szit.hu

Bevezetés

Adatok tárolására két függvény áll rendelkezésre:

localStorage

sessionStorage

A sessionStorage()-al beállított adat, csak a munkamenete idejéig él. A böngésző újraindítása után nem elérhető. A localStorage() függvénnyel tárolt adat, ezzel ellentétben később is elérhető.

localStorage()

Röviden

Tárolás:

localStorage.setItem('szam1', szamValtozo); localStorage.setItem('szam2', 35); localStorage.setItem('nev', 'Nagy József');

Kiolvasás:

var szam = localStorage.szam;

vagy:

var szam = localStorage.getItem('szam');

Törlés:

localStorage.removeItem('szam');

Konkrét példa

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Sablon</title> </head> <body> <input id="szamBevitel"> <button id="taroloGomb" onclick="taroloGombHandler()">Tárol</button> <button id="mutatGomb" onclick="mutatGombHandler()">Mutat</button> <button id="torolGomb" onclick="torolGombHandler()">Töröl</button> <div id="tarolasKimenet"></div> <script> function taroloGombHandler() { var bejovoSzam = document.getElementById("szamBevitel").value; if(bejovoSzam == "") document.getElementById("tarolasKimenet").innerHTML = "Nem írtál be semmit"; else { localStorage.setItem('szam', bejovoSzam); document.getElementById("tarolasKimenet").innerHTML = "Tárolva"; } } function mutatGombHandler() { if(localStorage.getItem('szam') == null) alert('Nincs érték tárolva'); else alert(localStorage.getItem('szam')); } function torolGombHandler() { localStorage.removeItem('szam'); document.getElementById("tarolasKimenet").innerHTML = "Törölve"; } </script> </body> </html>

sessionStorage()

<button onclick="csinal()">Mehet</button> <script> sessionStorage.setItem("user", "John"); function csinal(){ alert(sessionStorage.getItem("user")); } </script>

Böngészőkben

A következő táblázatban láthatjuk, az egyes böngészők mely verziótól támogatják az egyes függvényeket.

Lehetőség	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
localStorage	4	3.5	8	10.50	4
sessionStorage	5	2	8	10.50	4

A támogatottság ellenőrzése

if(typeof(Storage) !== "undefined") { // localStorage/sessionStorage kód } else { // A böngésző sajnos nem támogatja a Web Storage eljárást.. }

Tárolás JSON formátumban

var obj = {'nev': 'Nagy János', 'tel': 'Szolnok'}; localStorage.setItem('dolgozoAdat', JSON.stringify(obj)); var obj = JSON.parse(localStorage.getItem('dolgozoAdat'));

Objektumok tömbje

Objektumok tömbjét csak JSON formátumban tudjuk tárolni.

Tárolás:

var objtomb = [ {nev: 'Jóska', kor: 35}, {nev: 'Márti', kor: 34} ]; localStorage.setItem('valami', JSON.stringify(objtomb));

Lekérés:

objtomb = JSON.parse(localStorage.getItem('valami'));