Wie erstellt man eine ToDo Liste in HTML5 mit Local Storage

Mit HTML5 ist es möglich Offline Applikationen zu schreiben. Ein Grund dafür ist der Local Storage. Dieser ermöglicht es Daten in dem Browser des Benutzers zu speichern. Im Prinzip war das schon immer durch HTTP Cookies möglich. Ein Nachteil von Cookies ist allerdings, dass sie bei jedem HTML Request mitgeschickt werden und pro Domain nicht mehr als 20 Cookies á 4KB existieren dürfen.

Die Größe von Local Storage hingegen ist nicht in ihrer Größe beschränkt. Die Daten werden von dem Browser des Benutzers verwaltet. Das bedeutet, dass die Daten auch nur in diesem Browser verfügbar sind.

Was bietet Local Storage also? Der Browser legt für die Seite eine Datenbank an, in der Datensätze gespeichert werden. Die Datensätze sind nicht wie bei einem Cookie oder Session Variablen auf ihre Größe beschränkt, sondern können beliebig groß sein. Öffnet man ein neues Fenster und ruft die Seite auf, wäre normalerweise die Session nicht mehr vorhanden. Dank Local Storage schon.

Local Storage hat im wesentlichen vier Methoden.

localStorage.setItem(id,value);
Mit diesem Methode kann man einer id einem Wert zuweisen.

localStorage.getItem(id);
Mit dieser Methode bekommt man  den Wert einer id zurück.

localStorage.removeItem(id);
Mit dieser Methode löscht man das Element mit der id.

localStorage.clear();
Alle Daten in der Local Storage werden gelöscht.

Man kann auch direkt auf die Elemente zugreifen über localStorage[id].

In diesem Tutorial verwende ich das jQuery Framework. Man kann das ganze aber auch ohne dieses Framework umsetzen. jQuery bietet aber die .blur() Funktion, die ein Event hervorruft, sobald ein Element getriggert wird.

Unser HTML body besteht im Wesentlichen aus der Liste, die allerdings das Attribut contenteditable mit dem Wert true aufweist. Dadurch kann man sie bearbeiten. Bei der Überschrift hab ich das gleich Attribut verwendet um die Liste auch für andere Zwecke verwenden zu können.

<ol id="liste" contenteditable="true">
      <li></li>
 </ol>

In dem JavaScript speichert man das HTML Object zunächst in eine Variable ab.

toDoListe = $('#liste');

Für jede dieser Variable (Liste / Überschrift) zwei verschiedene Aufrufe. Zunächst wird überprüft ob für diese id schon ein Wert abgespeichert wurde. Ist dies der Fall, rufen wir auf die HTML Objekt die jQuery .html() Funktion auf, wobei der Parameter unser localStorage Element ist.

if (localStorage.getItem('toDoListe')) {
toDoListe.html(localStorage.getItem('toDoListe'));
}

Wenn wir Änderungen in der Liste verfolgen möchten, können wir dafür die .blur() Funktion benutzten. Erfolgt eine Änderung speichern wir das Ergebnis im Local Storage.

toDoListe.blur(function() {
localStorage.setItem('toDoListe', $(this).html());
});

Da es zur Zeit Probleme mit Safari gibt, wenn zwei leere Listenelemente übereinander erzeugt werden, habe ich noch den folgenden Fix implementiert, der das vorherige Listenelement überprüft, ob es leer ist.

toDoListe.keypress(function(event) {
if(event.which==13){
if(toDoListe.find('li').last().html()=='&amp;lt;br&amp;gt;'){
event.preventDefault();
}
}
});

Zusätzlich ist noch ein Button implementiert, der die Funktion localStorage.clear(); aufruft um den Local Storage zu leeren.

Fertig ist unsere ToDo Liste! Erst nach dem aktualisieren der Seite kann man das Resultat begeistern.

DEMO DOWNLOAD

Be Sociable, Share!

Comments are closed.