Tartalomjegyzék

< JavaScript

Adattárolás

Bevezetés

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

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

index.html
<!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'));