Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:javascript:javascript_adattarolas

< JavaScript

Adattárolás

  • Szerző: Sallai András
  • Copyright © Sallai András, 2013, 2014, 2020
  • Licenc: GNU Free Documentation License 1.3

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'));
oktatas/web/javascript/javascript_adattarolas.txt · Utolsó módosítás: 2020/03/01 00:20 szerkesztette: admin