Adattárolás

Szerző: Sallai András
Copyright © Sallai András, 2013, 2014
Licenc: GNU Free Documentation License 1.3
Web: http://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..
}

szit

Felhasználói eszközök

Eszközök a webhelyen

Tartalomjegyzék