HTML5 - Web Storage
HTML5 - Web Storage
Erstellt von Sven Cieslok
Web Storage
Mit Web Storage können Daten lokal im Browser abgespeichert werden.
Eigenschaften
Web Storage ergänzt die Möglichkeiten zur Speicherung von Daten einer Website.
Dieser Speicher dient als Alternative zu Cookies.
Im direkten Vergleich zu Cookies, liegt die Speicherkapazität bei 5 Megabyte
Entgegen 4 Kilobyte bei CookiesDiese Daten werden nicht vom Server gesendet. Sie werden direkt im Browser gebildet.
Weiterhin dient der Speicher domainweit, alle Seiten auf dieser Domain können auf den selben Speicher zugreifen.
Das steigert die Performance der Website
Kompatibilität
API Version Chrome 4.0 Firefox 3.5 Safari 4.0 Internet Explorer 8.0 Opera 11.5Unterscheidung
localStorage - Die Daten werden nie gelöscht
sessionStorage - Die Daten werden beim schließen des Tabs gelöscht
Anwendung
Zur Erklärung verwedende ich den localStorage
Store Funktion
localStorage.setItem("background", "white");
oder
localStorage.background = "white";
Retrieve Funktion
document.getElementById("result").innerHTML = localStorage.getItem("background");
oder
document.getElementById("result").innerHTML = localStorage.background;
Delete Funktion
localStorage.removeItem("background");
Praxisbeispiel
BeispielErklärung
<!--<body onLoad="javascript:loadBackground();">--><header><nav>
<p>Hintergrund:</p>
<select id="backgroundsel" size="1">
<option value="white">Weiß</option>
<option value="gray">Grau</option>
</select>
<input class="auswahl" type="button" value="Set" onclick="javascript:setBackground();">
</nav></header><!--</body>-->
function setBackground() {
localStorage.bgColor = document.getElementById("backgroundsel").value;
document.body.style.backgroundColor = localStorage.bgColor;
}
function loadBackground() {
if (localStorage.bgColor.length == 0) {
localStorage.bgColor = "white";
} else {
document.body.style.backgroundColor = localStorage.bgColor;
document.getElementById("backgroundsel").value = localStorage.bgColor;
}
}