HTML5 Local Storage Tutorial - ToDo Liste programmieren
Anzeige Hier werben
Mit HTML5 kommen viele neue Features, beispielsweise das bessere Strukturieren von HTML-Seiten mittels neuer Tags, das Einbinden von Audio- und Video-Dateien ohne die Hilfe eines Flash Players, oder neue Formular Elementtypen wie z.B. date, email oder number.
Dies sind selbstverständlich noch längst nicht alle Neuerungen die es mit HTML5 geben wird. Wer mehr über den kommenden Standard erfahren möchte kann dies bei Wikipedia oder dem W3C nachschlagen.
Dieses Tutorial beschreibt das Feature Local Storage, also lokale Speicherung anhand eines Beispiels einer ToDo-Liste. Damit sind aber nicht die guten alten Cookies gemeint. Aber was sind die Unterschiede von der lokalen Speicherungen zu den Keksen? Ein kleiner Überblick:
- Im Gegensatz zu Cookies kann man mit Local Storage nicht nur 80KB speichern sondern mehrere Megabytes.
- Die gespeicherten Daten werden nicht wie Cookies immer mitgeschickt sind aber trotzdem immer vorhanden und abrufbar.
- Cookies laufen nach einer bestimmten Zeit ab, lokal gespeicherte Daten aber nicht.
- Mit Local Storage können Webapps wie zB. To-Do Listen, Einkaufszettel, Notizbücher etc. erstellt werden ohne dass die Daten auf einem Webserver gespeichert werden sondern beim Benutzer lokal gesichert werden.
Wie HTML5 Local Storage funktioniert
Bevor wir eine kleine ToDo-Liste schreiben werden, erst einmal ein kürzer Überblick wie Local Storage eigentlich funktioniert.
Im Kern stellt jeder Browser, der dieses Feature unterstützt, eine Referenz zu einem Objekt bereit. Das localstorage Objekt. Die Daten werden im Key/Value Format im localstorage-Objekt abgelegt. Heißt also, ein Schlüssel hat genau einen Wert, also einen String.
Gespeicherte Daten im Localstorage verbleiben dort für immer, außer man löscht sie mit der dafür vorhanden Funktion. Man kann also den Browser beenden und Neustarten ohne dass die Daten verloren gehen.
Wichtig zu wissen ist, das ein Localstorage-Objekt pro Domain angelegt wird. Da die Spezifikation noch etwas schwammig ist, unterscheidet sich die Handhabung des Localstorage von Browser zu Browser. Der Firefox Browser blockiert Zugriffe auf den Localstorage sobald die Anfrage nicht von der selben Domain kommt welche die Daten dort abgelegt hat.
Folgende JavaScript-Funktionen gibt es für das Speichern, Lesen und Löschen der Localstorage-Daten:
localStorage.setitem('key', 'value');
Speichert einen Wert unter dem angegebenen SchlüssellocalStorage.getitem('key');
Gibt den Wert vom angegebenen Schlüssel zurück. Existiert dieser nicht wir "undefined" zurückgegeben. Eine Alternative für den Zugriff auf die Daten wäre localStorage.key.localStorage.removeItem('key');
Entfernt den kompletten Datensatz des Keys aus dem Localstorage. Wiederherstellen ist nicht möglich.localStorage.clear();
Löscht alle Daten aus dem lokalen Speicher welcher von der Domain angelegt wurde.
Die Aufgabenzettel App - Eigene ToDo-Liste programmieren
Nachdem wir nun einen Überblick haben, wie Local Storage grundlegend funktioniert, können wir das ganze an einem einfachen Beispiel ausprobieren. Unsere Aufgabe wird es sein ein einfach ToDo Liste mit Local Storage, ein wenig CSS3 und contenteditable zu implementieren.
Fertig sollt das ganze in etwa so aussehen:
So, dann mal ran an die Arbeit! Als erstes, das HTML-Markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Aufgabenplaner mit localStorage</title>
<link type="text/css" rel="stylesheet" href="localstorage_style.css" media="all" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="storage.js"></script>
</head>
<body>
<div id="box">
<h1>Meine Aufgaben</h1>
<ol id="todolist" contenteditable="false">
<li>Local Storage lernen</li>
<li>Artikel fertig schreiben</li>
</ol>
</div>
<input id="edit" type="button" value="Bearbeiten" />
<input id="clear" type="button" value="Leeren" />
</body>
</html>
|
Wie man am HTML bereits erkennt, braucht es nicht viel Markup. Wir benötigen lediglich den HTML5-Doctype, inkludieren Stylesheets und JavaScript Dateien und erstellen eine Box in der eine Überschrift und eine Liste mit contenteditable liegt. Diese wird später unser Aufgabenzettel. Zum Schluss noch zwei Buttons welche uns Speichern/Bearbeiten und Löschen lassen.
Zum Javascripten wird als Framework jQuery verwendet, wird aber nicht zwingend vorausgesetzt. jQuery erleichtert uns aber das auswählen der einzelnen Elemente innerhalb des DOMs.
Als nächstes folgt der CSS Teil, welches unsere Aufgabenliste ein wenig hübscher erscheinen lässt.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | @import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);
body {
background-color: #ddd;
font-family: 'Gloria Hallelujah', Trebuchet MS, Arial, sans-serif;
font-size: 100%;
}
#box {
width: 300px;
background: #fff955;
background: -moz-linear-gradient(top, #fefbb0, #fff955);
background: -webkit-linear-gradient(top, #fefbb0, #fff955);
background: -o-linear-gradient(top, #fefbb0, #fff955);
background: -ms-linear-gradient(top, #fefbb0, #fff955);
box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
-o-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
font-size: 12px;
padding: 0 25px 25px;
margin-bottom: 12px;
}
#box h1 {
margin: 0;
padding-top: 10px;
}
#box ol {
margin: 1em 0 0;
padding: 0 0 0 25px;
}
#box ol li {
font-size: 16px;
}
|
Zunächst holen wir uns von den Google Web Fonts eine nette Schriftart und wählen diese als Standard aus. Unsere Aufgabenliste wird mit einem linearen Verlauf im Hintergrund ausgestattet. Da dies nicht viele Browser implementiert bzw. nur mit Prefixen verstehen müssen wir zuerst einen Fallback angeben und danach für jeden Browser neu definieren. Der restliche CSS Teil ist bis auf den neuen CSS3 Eigenschaften border-radius und box-shadow relativ selbsterklärend.
Zugriff auf Local Storage-Objekte
Nun fehlt uns noch der wichtigste Teil dieser ganzen App. Das Speichern, Bearbeiten und Löschen der Einträge in der Aufgabenliste.
Insgesamt werden wir vier einfach Funktionen schreiben. Zum einen wollen wir Speichern können, bereits fertige Arbeiten aus der Liste entfernen, beim Neuladen der Seite unsere Einträge wieder haben und als letzte Funktion unsere Liste bearbeiten können.
1 2 3 4 | function saveContents() {
var todoList = $('#todolist').html();
localStorage['todoList'] = todoList;
}
|
Das Speichern der Aufgaben ist leicht. Wir holen uns den Inhalt der Liste und Speichern dieses in das localStorage-Objekt mit dem Key "todoList". Wenn wir das ganze so handhaben, wäre es später ohne Probleme möglich mehrere Listen anzulegen und diese jeweils mit einem eigenen Key im localStorage zu speichern.
1
2
3
4
5
6 | function restoreContents() {
var myTodoList = localStorage['todoList'];
if (myTodoList != undefined) {
$('#todolist').html(myTodoList);
}
}
|
Diese Funktion stellt die Liste wieder her. Dabei wird das localStorage-Objekt ausgelesen und zurück in die Liste geschrieben. Sollte localStorage noch leer sein, beispielsweise beim allerersten Aufruf, schreiben wir nichts in die Liste, sondern belassen das unserem im Markup festgelegten Inhalt.
1 2 3 4 | function resetContent(e) {
localStorage.clear();
window.location.reload();
}
|
Wie der Name der Funktion schon verrät, löschen wir den Inhalt aus localStorage und laden unsere Seite neu. Damit wird der Inhalt des Markups angezeigt.
1 2 3 4 5 6 7 8 9 10 11 | function toggleEditContent(e) {
if ($('#todolist').attr('contenteditable') == 'false') {
$('#todolist').attr('contenteditable', 'true');
$('#edit').val('Speichern');
$('#todolist').focus();
} else {
$('#todolist').attr('contenteditable', 'false');
$('#edit').val('Bearbeiten');
saveContents();
}
}
|
Die letzte Funktion setzt unser contenteditable-Attribut richtig. Zum Bearbeiten des Elements muss dieses auf true gesetzt werden und sollte auch gleichzeitig den Fokus erlangen. Wollen wir nach dem Bearbeiten unsere Eingaben speichern, stellen wir das ganze auf false zurück und rufen unsere Speichern Funktion auf.
Was uns grundsätzlich noch fehlt ist die Klick-Events auf die Buttons abzufangen und diese mit unseren Funktionen zu verbinden. Zusätzlich sollten wir noch unsere Funktion zum Wiederherstellen der Liste angeben, damit beim Neuladen der Seite oder Beenden und Neustarten des Browsers unsere Einträge wieder erscheinen.
Hier die fertige Javascript-Datei:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | $(document).ready(function() {
restoreContents();
$('#edit').bind('click', toggleEditContent);
$('#clear').bind('click', resetContent);
function saveContents() {
var todoList = $('#todolist').html();
localStorage['todoList'] = todoList;
}
function restoreContents() {
var myTodoList = localStorage['todoList'];
if (myTodoList != undefined) {
$('#todolist').html(myTodoList);
}
}
function toggleEditContent(e) {
if ($('#todolist').attr('contenteditable') == 'false') {
$('#todolist').attr('contenteditable', 'true');
$('#edit').val('Speichern');
$('#todolist').focus();
} else {
$('#todolist').attr('contenteditable', 'false');
$('#edit').val('Bearbeiten');
saveContents();
}
}
function resetContent(e) {
localStorage.clear();
window.location.reload();
}
});
|
Zusammenfassung
Arbeiten mit Local Storage ist einfach und stellt eine schicke Möglichkeit dar, Daten lokal zu speichern ohne an die Begrenzungen von Cookies zu stoßen. Somit lassen sich kleine Browserapps schnell entwickeln. Sei es einen Stundenplan, Termin- und Aufgabenliste oder eine App zum Verwalten von Kontakten. Beachten sollte man allerdings das jeweils nur ein Localstorage Objekt pro Domain angelegt wird und nur moderne Browser dies auch unterstützen. Zusätzlich hat man noch das Problem das die Daten nicht Cross-Browser seitig gespeichert werden. In einem anderen Browser sind die Daten dann einfach nicht da.
Downloads
Für diesen Artikel stehen zusätzliche Dateien zum Herunterladen bereit. Der Download ist nur für registrierte Benutzer möglich. Die kostenlose Registrierung dauert nur wenige Sekunden.
Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher hat 1 Person an der Seite "HTML5 Local Storage Tutorial - ToDo Liste programmieren" mitgewirkt.
Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "HTML5 Local Storage Tutorial - ToDo Liste programmieren" hier bearbeiten.
-
Computer Scientologe im 7. Semester an der HS Augsburg. Schreibt gerade an seiner Bachelorarbeit im Bereich neue Webtechnologien und arbeitet als Werksstudent bei Team23. Nebenbei betreibt er noch seinen Blog www.gironimo.org
g. ziegler gukzi@gmx.de
Hi,
habe diesen Code getestet.
Doch wo wird meine Änderung hingespeichert, um bei einem Neustart auf den
geänderten Text zugreifen zu können ???
mfG
g. ziegler gukzi@gmx.de
Re: g. ziegler gukzi@gmx.de
Die Änderungen werden im localStorage Objekts des Browsers gespeichert. Dieser stellt ein Objekt pro Webseite zur Verfügung. Werden Änderungen am Text gemacht und gespeichert, sind diese nach einem Neustart auch wieder vorhanden. Natürlich nur wenn der Browser dies auch unterstützt.