JavaScript/Web Storage

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Web Storage API ermöglicht das client-seitige Speichern von Daten. Ursprünglich war Web Storage Teil von HTML5, erhielt aber eine eigene Spezifikation.[1] Die lokal gespeicherten Daten (Local Shared Objects) können von allen Scripten der Domäne gespeichert und abgerufen werden.

  • HTML5
  • Chrome
  • Firefox
  • IE 8
  • Opera
  • Safari

Details: caniuse.com

Im Gegensatz zu Cookies ist diese Methode sicherer und schneller, da die Daten bei Server-Requests nicht automatisch übertragen werden. Es können größere Datenmengen (mind. 5 MB[2]) gespeichert werden.

Die Web Storage API stellt zwei neue Objekte zur Verfügung:



localStorage[Bearbeiten]

Mit localStorage können Sie Daten im Cache des Browsers speichern. Die Daten werden beim Verlassen der Seite nicht gelöscht und bleiben verfügbar. Sie werden als String gespeichert, können aber mit parseInt oder parseFloat wieder in Zahlen umgewandelt werden. Für komplexe Daten empfiehlt es sich, diese als JSON serialisiert abzulegen. JSON.stringify() und JSON.parse() sorgen dafür, dass die Typen wiederhergestellt werden können.

Folgende Methoden existieren:

Mit localStorage.setItem(keyName, keyValue) speichern Sie einen Eintrag mit 2 Werten.

  • keyName: Name des Eintrags
  • keyValue: string mit zu speicherndem Eintrag
    Beachten Sie: Wenn ein Eintrag mit diesem keyName schon besteht, wird er ohne Warnung überschrieben.
Beispiel: Speichern einer Eingabe
//Speichern von Strings
localStorage.setItem('Aufgabe_1', 'Aktiv am Self-Wiki mitarbeiten!');

//Speichern von Variablen
localStorage.setItem(aufgabeNr, aufgabeText);


Mit localStorage.getItem(keyName) wird ein Eintrag ausgelesen.

  • keyName: Name des Eintrags
Beispiel: Abrufen eines Eintrags
localStorage.getItem('aufgabeNr');
Beachten Sie: Wenn ein Eintrag mit diesem keyName nicht besteht, wird null zurückgegeben.


Mit localStorage.removeItem(keyName) löschen Sie einen Eintrag.

  • keyName: Name des Eintrags
Beispiel: Löschen eines Eintrags
localStorage.removeItem('aufgabeNr');


Mit localStorage.clear(): löschen Sie alle gespeicherten Einträge dieser Domäne.

Beispiel: Löschen aller Einträge
localStorage.clear();



Anlegen einer ToDo-Liste[Bearbeiten]

Arunkumar Gudelli hat eine localStorage-Anwendung für eine Linksammlung geschrieben, die hier in abgewandelter Form ToDos verwaltet.[3]

Beispiel: ToDo-Liste ansehen …
window.onload = init;
function init() {
	var button = document.getElementById('mehr');
	button.onclick = ToDoHinzufügen;
	var clearButton = document.getElementById('loeschen');
	clearButton.onclick = allesLöschen;
	var eintraegeArray = HolEinträge();
	for (var i = 0; i < eintraegeArray.length; i++) {
		var aufgabeNr = eintraegeArray[i];
		var value = JSON.parse(localStorage[aufgabeNr]);
		insDOMschreiben(aufgabeNr, value);
	}	
}
function HolEinträge() {
	var eintraegeArray = localStorage.getItem('eintraegeArray');
	if (!eintraegeArray) {
		eintraegeArray = [];
		localStorage.setItem('eintraegeArray', JSON.stringify(eintraegeArray));
	} else {
		eintraegeArray = JSON.parse(eintraegeArray);
	}
	return eintraegeArray;
}

function ToDoHinzufügen() {
	var eintraegeArray = HolEinträge();
	var value = document.getElementById('eingabe').value;
	if(value!='')
	{
	var currentDate = new Date();
	var aufgabeNr = 'aufgabe_' + currentDate.getTime()	
	var aufgabeText = {'value': value};
	localStorage.setItem(aufgabeNr, JSON.stringify(aufgabeText));	
	eintraegeArray.push(aufgabeNr);
	localStorage.setItem('eintraegeArray', JSON.stringify(eintraegeArray));
	insDOMschreiben(aufgabeNr, aufgabeText);
	document.getElementById('eingabe').value=' ';
	}
	else
	{
	alert('Bitte geben Sie etwas ein!');
	}
}

function toDoLöschen(e) {
	var aufgabeNr = e.target.id;
	var eintraegeArray = HolEinträge();
	if (eintraegeArray) {
		for (var i = 0; i < eintraegeArray.length; i++) {
			if (aufgabeNr == eintraegeArray[i]) {
				eintraegeArray.splice(i,1);
			}
		}
		localStorage.removeItem(aufgabeNr);
		localStorage.setItem('eintraegeArray', JSON.stringify(eintraegeArray));
		ausDOMentfernen(aufgabeNr);
	}
}

function insDOMschreiben(aufgabeNr, ItemObj) {
	var eintraege = document.getElementById('eintraege');
	var eintrag = document.createElement('li');
	eintrag.setAttribute('id', aufgabeNr);
    eintrag.innerHTML = ItemObj.value;
	eintraege.appendChild(eintrag);
	eintrag.onclick = toDoLöschen;
}

function ausDOMentfernen(aufgabeNr) {
	var eintrag = document.getElementById(aufgabeNr);
	eintrag.parentNode.removeChild(eintrag);
}

function allesLöschen() {
	localStorage.clear();
	var ItemList = document.getElementById('eintraege');
	var eintraege = ItemList.childNodes;
	for (var i = eintraege.length-1; i >= 0; i--) {
		ItemList.removeChild(eintraege[i]);
	}
	var eintraegeArray = HolEinträge();
}
}
Nach dem Laden der Seite wird die Funktion init() aufgerufen, die sich erst mit HolEinträge() die schon bestehenden Einträge aus dem WebStorage holt und in ein array eintraegeArray schreibt.

Mit der Funktion insDOMschreiben(aufgabeNr, ItemObj) wird die Liste mit der id eintraege durch document.createElement('li') mit einem neuen Listeneintrag erweitert. Er erhält als id einen Zeitstempel und als Inhalt mittels innerHTML den gespeicherten Text.

Wenn Sie jetzt neuen Text in das Eingabefeld eingeben und auf den Button klicken, wird die Funktion ToDoHinzufügen() aufgerufen. Wenn im Eingabefeld Text vorhanden war, erhält dieser einen Zeitstempel und wird mit diesem und dem Inhalt der Eingabe, die mit JSON.stringify in eine Zeichenkette umgewandelt wurde, abgespeichert.

Durch einen Klick auf Listenelemente können Sie einzelne Listenelemente mit localStorage.removeItem(aufgabeNr) löschen. Ein Klick auf den Löschen-Button löscht die gesamte gespeicherte Liste mit localStorage.clear().

sessionStorage[Bearbeiten]

SessionStorage ähnelt localStorage und hat auch dieselben Methoden, die Daten stehen aber nur während des Browsens zur Verfügung und werden mit dem Verlassen der Seite gelöscht.

Alternativen[Bearbeiten]

Für das clientseitige Speichern und Verarbeiten größerer Datenmengen wurde die IndexedDB-API entwickelt, die allen Komfort einer Datenbank bietet.

Weblinks[Bearbeiten]

  1. W3C: Webstorage
  2. stackoverflow: Is 5MB the de facto limit for W3C Web Storage?
  3. Arunkumar Gudelli: HTML5 Web Storage API Example