HTML5 Local Storage Tutorial - ToDo Liste programmieren

1 | 2 Kommentare | 35531 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "HTML5 Local Storage Tutorial - ToDo Liste programmieren" mit Ihrem Wissen!

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.

Bild zu HTML5 Local Storage Tutorial - ToDo Liste programmieren
Firefox3.6Unterstützt4Unterstützt
IE6Nein7Nein8Nein9Unterstützt
Opera10Nein11Fast
Safari4Unterstützt5Unterstützt
Browsersupport Local Storage

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.

Bild zu HTML5 Local Storage Tutorial - ToDo Liste programmieren

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üssel
  • localStorage.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:

Bild zu HTML5 Local Storage Tutorial - ToDo Liste programmieren

So, dann mal ran an die Arbeit! Als erstes, das HTML-Markup:

localstroge.html  
HTML
 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.

localstorage_style.css  
css
 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.

saveContents()  
JavaScript
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.

restoreContents()  
JavaScript
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.

resetContent()  
JavaScript
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.

toggleEditContent()  
JavaScript
 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:

storage.js  
JavaScript
 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.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 2 Personen 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.

Mitarbeiter
  • Webentwickler bei Team23, Djangonaut und Open-Source-Fan. Mehr Infos: www.gironimo.org
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.

Kommentare: HTML5 Local Storage Tutorial - ToDo Liste programmieren

Neuen Kommentar schreiben
g. ziegler gukzi@gmx.de
Beantworten

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

Gerd Ziegler am 25.10.2011 um 13:08
Re: g. ziegler gukzi@gmx.de
Beantworten

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.

Marc Rochow am 25.10.2011 um 14:46