HTML5 Lokale Datenspeicherung: Daten im Browser offline speichern

KonstantinK

Seit Mitte der 1990er Jahre gibt es bereits die Möglichkeit, Daten bis 4 Kilobyte im Textformat clientseitig zu speichern. Cookies, so taufte damals das Unternehmen Netscape seine Erfindung. Die Technologie sendet Textinfos vom Server an den Browser, wo sie gespeichert werden und bei einer erneuten HTTP-Anfrage wieder an den Server retourniert werden können. Cookies sind jedoch in ihrer Anwendung stark limitiert, da sie nach einer gewissen Zeit ablaufen und Daten nicht dauerhaft offline gespeichert werden können.

Webanwendungen, die JavaScript verwenden, verfügen über die Möglichkeit auf Cookies zuzugreifen. Außerdem bietet HTML5 die Möglichkeit, Web Storage bzw. in der Literatur auch als DOM Storage bekannt, zu verwenden. Der Vorteil in der Verwendung von JavaScript in Verbindung mit Web Storage liegt nun darin, dass die Daten nicht bei jeder HTTP-Anfrage zurück an den Server geschickt werden müssen und nicht unbedingt nach Schließen des Browsers aus dem Speicher gelöscht werden.

Mit Web Storage können Daten im Textformat bis etwa 5 Megabyte auf dem Client gespeichert werden. Es handelt sich dabei sozusagen um persistente Cookies, die je nach Verwendung und auch nach Schließen des Browsers bestehen bleiben. Wesentlich ist ferner, dass HTML5 Web Storage in Form von ‚localStorage‘ und ‚sessionStorage‘ im Browser zur Verfügung steht. Die beiden Varianten sind in der Funktionsweise ident, jedoch liegt der Unterschied darin, dass ein Local-Storage-Objekt auch nach dem Schließen des Browsers weiter bestehen bleibt und im Gegensatz dazu das Session-Storage-Objekt beim Schließen des Browsers gelöscht wird.

localStorage.setItem('key', 'value'); // Hinzufügen eines Elements
localStorage.getItem('key'); // Getter für ein Element
localStorage.removeItem('key'); // Löscht ein Element
localStorage.clear(); // Löscht den gesamten lokalen Speicher

Offlinebetrieb von Webanwendungen

Es bietet sich an, Local-Storage- bzw. Session-Storage-Objekte zum Beispiel nur im Offlinebetrieb von Webanwendungen zu verwenden. Ein Anwendungsszenario könnte hier eine Erfassung von Nummern mit einem mobilen Endgerät sein, das JavaScript und HTML5 unterstützt.

Um festzustellen, ob sich der Client momentan im Offline- oder im Online-Modus befindet, kann die JavaScript-Methode ‚navigator.onLine‘ verwendet werden. Diese liefert einen boolean Wert zurück. Ist der Browser gerade online wird hier ‚true‘ zurückgegeben, ansonsten der Wert ‚false‘.

Web Storage praktisch anwenden

Im folgenden Beispiel sehen wir uns die Funktionalität des Web Storage an. Hier können wir Werte beliebig eingeben und löschen. Hier werden die obenstehenden Funktionalitäten ausprogrammiert.

// Deklaration cars Array
var cars = [];

// Anstelle des 'Klasse' localStorage, kann auch sessionStorage verwendet werden!
window.onload = function () {
    // Prüfen ob Browser die Web Storage Funktion unterstützt.
    if (typeof (Storage) != "undefined") {
        showCars();

        // Ein Element speichern
        document.getElementById("btnSave").addEventListener(
            "click", function () {
                // Wert aus dem Textfeld auslesen
                var car = document.getElementById("txtCar").value;
                if (car) {
                    cars.push(car);
                    // key : value; Hinzufügen des value JSON-String zum key 'cars' im localStorage
                    localStorage.setItem("cars", JSON.stringify(cars));
                    showCars();
                }
            }, false);

        // Alle Elemente löschen
        document.getElementById("btnDelete").addEventListener(
            "click", function () {
                cars = [];
                localStorage.removeItem("cars");
                // Alternativ könnte hier der gesamte localStorage gelöscht werden.
                //localStorage.clear();
                showCars();
            }, false);

        // Ein Element löschen
        document.getElementById("btnDeleteOne").addEventListener(
            "click", function () {
                var car = document.getElementById("txtCar").value;
                if (car) {
                    //  Entfernen des car Objekts aus dem JSON cars
                    removeCar(cars, car);
                    localStorage.setItem("cars", JSON.stringify(cars));
                    showCars();http://blog.ppedv.de/
                }
            }, false);

    } else {
        document.getElementById("txtShowCars").innerHTML = "Ihr Browser unterstützt leider keine HTML5 lokale Datenspeicherfunktion";
    }
}

// Funktion zeigt die bestehenden Fahrzeuge
function showCars() {
    var cars = JSON.parse(localStorage.getItem("cars"));

    if (cars) {
        document.getElementById("txtShowCars").innerHTML = cars;
    } else {
        document.getElementById("txtShowCars").innerHTML = "Keine Autos gespeichert!";
    }
}

// Funktion entfernt ein Fahrzeug aus dem Fahrzeug Array
function removeCar(array, item) {
    for (var i = array.length-1; i >=0; i--) {
        if (array[i] === item) {
            array.splice(i,1);
        }
    }
}

Untenstehend befindet sich das dazugehörige HTML5 mit herkömmlichen Formularelementen.

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Lokale Datenspeicherung</title>
</head>
<body>
    <form>
        <input type="text" name="car" id="txtCar" />
        <input type="button" value="Speichern" id="btnSave" />
        <input type="button" value="Alle Einträge löschen" id="btnDelete" />
        <input type="button" value="Eintrag löschen" id="btnDeleteOne" />
    </form>
    <p id="txtShowCars"></p>
    <script type="text/javascript" src="script.js"></script>
</body>
</html>