JavaScript/Web Storage
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 Domain gespeichert und abgerufen werden.
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 (max. 5 MB[2][3]) gespeichert werden.
Wenn Sie Daten speichern, sollten Sie die Benutzer immer darüber informieren, was und warum Sie diese Daten speichern.
Web Storage hat hier den Vorteil, dass die Daten auf dem Computer des Nutzers bleiben und er die Kontrolle über seine Daten behält. Wenn der Browsercache geleert wird, sind alle gespeicherten Daten weg.
Alternativ müssten Sie die Daten mit PHP serverseitig speichern. Dabei benötigen Sie aber eine Benutzerverwaltung und ein Loginsystem und müssen dann alles DSGVO-konform bestätigen lassen.
Die Web Storage API stellt zwei neue Objekte zur Verfügung:
window.localStorage: – speichert Daten unbegrenzt (ohne Ablaufdatum)window.sessionStorage: – speichert Daten für eine Session (Daten werden gelöscht, wenn der Tab geschlossen wird)
Inhaltsverzeichnis
Local Storage
Die Eigenschaft localStorage des window-Objekts stellt Ihnen ein Storage-Objekt zur Verfügung, in dem Sie Daten in Form von Key-Value Paaren speichern können. Die Daten werden im Cache des Browsers gespeichert und werden beim Verlassen der Seite nicht gelöscht, können also beim nächsten Besuch des Users wieder genutzt werden. Der Browser führt für jede Domain einen eigenen Local Storage, beispielsweise sind Local Storage-Einträge von wiki.selfhtml.org in forum.selfhtml.org nicht zugänglich.
Um zu prüfen, welche Werte eine Webseite im Local Storage ablegt, können Sie die Entwicklerwerkzeuge Ihres Browsers verwenden. Firefox zeigt Ihnen den Local Storage unter "Web-Speicher", Chrome unter "Applikation".
Sowohl Schlüssel als auch Werte für ein ein Storage-Objekt müssen Strings sein. Wenn Sie versuchen, einen anderen Datentyp zu speichern, konvertiert JavaScript den Wert durch Anwenden der toString-Methode in einen String. Um nach dem Laden den ursprünglichen Datentyp zurückzugewinnen, können Sie für Zahlen die Funktionen parseInt, parseFloat oder Number verwenden. Boolesche Werte müssen Sie mit "true" vergleichen, und den String, der aus einem Date-Wert entstand, können Sie mit Hilfe des Date-Konstruktors in ein Date-Objekt zurückwandeln.
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:
//Speichern von Strings
localStorage.setItem('Aufgabe_1', 'Aktiv am Self-Wiki mitarbeiten!');
//Speichern von Variablen
localStorage.setItem(aufgabeNr, aufgabeText);
localStorage.getItem('aufgabeNr');
localStorage.getItem(keyName) wird ein Eintrag ausgelesen.
-
keyName: Name des Eintrags
keyName nicht besteht, wird null zurückgegeben.for (let i=0; i < localStorage.length; i++) {
let storageKey = localStorage.key(i);
console.log(storageKey + ' : ' + localStorage.getItem(storageKey));
}
localStorage.removeItem('aufgabeNr');
localStorage.removeItem(keyName) löschen Sie einen Eintrag.
-
keyName: Name des Eintrags
localStorage.clear();
localStorage.clear(): löschen Sie alle gespeicherten Einträge dieser Domain.Anlegen einer ToDo-Liste
Arunkumar Gudelli hat eine localStorage-Anwendung für eine Linksammlung geschrieben, die hier in abgewandelter Form ToDos verwaltet.[4]
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
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, bzw. des Tabs gelöscht.
Alternativen
Für das clientseitige Speichern und Verarbeiten größerer Datenmengen wurde die IndexedDB-API entwickelt, die allen Komfort einer Datenbank bietet.
Weblinks
- ↑ WhatWG: Web Storage Spezifikation
MDN: Using the Web Storage API - ↑ MDN: Web/API/Storage_API/Storage_quotas_and_eviction_criteria
- ↑ stackoverflow: Is 5MB the de facto limit for W3C Web Storage?
- ↑ Arunkumar Gudelli: HTML5 Web Storage API Example
localStorage.setItem(keyName, keyValue)speichern Sie einen Wert im LocalStorage ab.keyName: Name des EintragskeyValue: string mit zu speicherndem EintragkeyNameschon besteht, wird er ohne Warnung überschrieben.