szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:web:javascript|< JavaScript]]

====== Adattárolás ======

  * **Szerző:** Sallai András
  * Copyright (c) 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:
<code javascript>
localStorage.setItem('szam1', szamValtozo);
localStorage.setItem('szam2', 35);
localStorage.setItem('nev', 'Nagy József');
</code>


Kiolvasás:

<code javascript>
var szam = localStorage.szam;
</code>

vagy:
<code javascript>
var szam = localStorage.getItem('szam');
</code>

Törlés:
<code javascript>
localStorage.removeItem('szam');
</code>

==== Konkrét példa ====

<code html 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>
</code>


<html>

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


</html>


===== sessionStorage() =====

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

===== 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 =====

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

===== Tárolás JSON formátumban =====

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

var obj = JSON.parse(localStorage.getItem('dolgozoAdat'));
</code>

===== Objektumok tömbje =====

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

Tárolás:
<code javascript>
var objtomb = [
         {nev: 'Jóska', kor: 35},
         {nev: 'Márti', kor: 34}
         ];

localStorage.setItem('valami', JSON.stringify(objtomb));
</code>


Lekérés:
<code javascript>
objtomb = JSON.parse(localStorage.getItem('valami'));
</code>