Erstellen dauerhafter Haftnotizen mit lokalem Speicher

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Der lokale HTML5-Speicher ähnelt Cookies auf Steroiden. Es ist unglaublich einfach zu bedienen und dennoch so leistungsstark. In diesem Tutorial zeige ich Ihnen, wie Sie die Funktion "Haftnotizen" erstellen, mit der Ihre Benutzer beim Surfen auf Ihrer Website dauerhafte Notizen machen können.

Schritt 1: Der HTML

Aufgrund der Dynamik dieses Projekts gibt es nicht wirklich viel zu programmieren, was dem normalen alten semantischen Markup im Wege steht. Wir simulieren lediglich eine Webseite, indem wir einige Füllinhalte zusammenstellen:

  <!DOCTYPE html>
    <html>
    <head>
        <meta charset='utf-8' />
        <title>HTML 5 complete</title>
        <link rel="stylesheet" href="default.css" />
        <link rel="stylesheet" href="stickies/stickies.css" />
        <!--[if IE]>
        <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <article>
            <header>
                <h1> Sample Article Title</h1>
            </header>
            <p>Lorem ipsum dolor. . . </p>
            <!-- a few lorem-ipsum paragraphs later . . . -->
            <footer>
                <p>Copyright 2010 Andrew Burgess</p>
            </footer>
        </article>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
        <script src="json2.js"></script>
        <script src="stickies/stickies.js"></script>
        <script>
        </script>
    </body>
    </html>

Hier sind einige wichtige Dinge zu beachten: Wir fügen zwei CSS-Dateien hinzu: Die erste ist das einfache Design der Seite, die wir als default.css bezeichnet haben. Dann haben wir spezielle CSS-Dateien für Stile, die sich auf unsere Haftnotizen beziehen. Es heißt stickies.css und befindet sich, wie Sie sehen können, im Ordner "stickies". Unten finden Sie vier Skripte:

jQuery aus dem CDN von Google
JQuery-Benutzeroberfläche aus dem CDN von Google
JSON2 von Douglas Crockford
Unsere eigene stickies.js, die sich im Verzeichnis „stickies“ befindet

Dann haben wir ein leeres Skript-Tag, mit dem wir die Engine etwas später starten.

Und das war's für HTML!

Schritt 2: Das CSS

Der Inhalt von default.css ist unglaublich einfach:

   body {
        margin:0;
        padding:0;
        background:#ccc;
        font:14px/1.5 "Helvetica Neue", Helvetica, Arial, san-serif;
    }
    article, footer, header { display: block; }
    article {
        width:880px;
        background:#fff;
        margin:auto;
        padding:40px;
    }
    article header {
        color:#474747;
        border-bottom:1px solid #474747
    }
    article footer {
        font-size:90%;
        color:#ccc;
    }

Das ist es; Jetzt gibt es das CSS von stickies.css, um das wir uns kümmern müssen ... aber wir haben dieses Markup noch nicht. Beginnen wir also mit JavaScript. Wenn dies erledigt ist, sehen wir uns das CSS für die Haftnotizen an.

Schritt 3: Das JavaScript

Hier ist das Grundgerüst für unsere JavaScript-Anwendung:

    var STICKIES = (function () {
        var initStickies = function () {},
            openStickies = function () {},
            createSticky = function (data) {},
            deleteSticky = function (id) {},
            saveSticky   = function () {},
            markUnsaved  = function () {};
            
        return {
            open   : openStickies,
            init   : initStickies
        };
    }());

Wir haben hier einige interessante Techniken im Gange. Das erste ist die selbstbeteiligende Funktion: Es sieht möglicherweise so aus, als würden wir der Variablen STICKIES eine Funktion zuweisen. Wenn Sie sich jedoch das Ende der Funktion genau ansehen, werden Sie feststellen, dass wir sie sofort ausführen. Als Hinweis - um uns daran zu erinnern, dass dies keine normale Funktion ist - setzen wir die gesamte Funktion in Klammern. STICKIES ist also keine Funktion, sondern der von dieser Funktion zurückgegebene Wert, in diesem Fall ein Objekt.

Das bringt uns zur nächsten Technik: Verschluss. Beachten Sie, dass von den sechs Funktionen, die wir erstellen, nur zwei für den Benutzer verfügbar sind (tatsächlich ist nur eine für die von uns geplante Verwendung erforderlich. Wenn wir Unterstützung für das Erstellen von Notizen auf Ihrer Website erstellen möchten, können wir die Funktionen verfügbar machen createSticky und deleteSticky). Obwohl die selbstbeteiligende Funktion bereits ausgeführt wird, bevor wir die Methoden verwenden, können wir die anderen von uns definierten Funktionen verwenden.

Okay, gehen wir zum Inhalt dieser Funktion über.

initStickies

Zunächst betrachten wir die Funktion initStickies:

    var initStickies = function initStickies() {
        $("<div />", { 
            text : "+", 
            "class" : "add-sticky",
            click : function () { createSticky(); }
        }).prependTo(document.body);
        initStickies = null;
    },

Das ist ziemlich einfach. Wir werden jQuery verwenden, um Elemente zu erstellen, und wir verwenden eine spezielle Syntax in Version 1.4: Dabei wird ein Objektliteral mit den Spezifikationen für das Element als zweiter Parameter an die jQuery-Funktion übergeben. Hier erstellen wir eine Schaltfläche zum Erstellen einer neuen Notiz. Das heißt, wir brauchen eine neue div; Wir setzen den Text auf "+" und geben ihm eine Klasse "add-sticky". Dann setzen wir einen Klick-Handler, um die createSticky-Methode aufzurufen (es ist wichtig, createSticky innerhalb einer Funktion aufzurufen und den Klick-Handler nicht direkt an createSticky zu rufen. Dies liegt daran, dass createSticky einen einzelnen Parameter annehmen kann und wir dies nicht tun. Ich möchte nicht, dass dies das Ereignisobjekt ist. Schließlich stellen wir diese div dem Körper vor. Zum Schluss setzen wir initStickies auf null. Ja, wir werden die Funktion, die wir ausführen, im Wesentlichen los. Dies stellt sicher, dass diese Funktion nur einmal ausgeführt wird. Wir möchten nicht, dass der Benutzer unserer API versehentlich mehrere Schaltflächen zum Hinzufügen von Notizen zur Seite hinzufügt.

openStickies

Fahren wir mit der nächsten Methode fort, openStickies:

    openStickies = function openStickies() {
        initStickies && initStickies();
        for (var i = 0; i < localStorage.length; i++) {
            createSticky(JSON.parse(localStorage.getItem(localStorage.key(i))));
        }
    },

Wir beginnen mit der Ausführung von initStickies ... aber was ist mit der ausgefallenen Syntax? Nun, Sie kennen wahrscheinlich den &&-Operator: den booleschen AND-Operator. Normalerweise verwenden Sie es, um mehrere Bedingungen in einer if-Anweisung zu überprüfen. Folgendes wird tatsächlich ausgeführt: Der erste Ausdruck wird ausgewertet. Wenn dies zutrifft, wird der zweite Ausdruck ausgewertet. In diesem Fall führen wir die Funktion aus, wenn initStickies noch nicht auf null gesetzt wurde. Dies vermeidet den Fehler, der beim Versuch entstehen würde, eine Nullvariable als Funktion auszuführen.

Als Nächstes durchlaufen wir jedes Element in localStorage. Folgendes tun wir in dieser for-Schleife (von innen nach außen):

localStorage.key() ist eine großartige Funktion, die den Schlüsselnamen des localStorage-Werts zurückgibt. Es wird eine Zahl als Parameter verwendet. Auf diese Weise können Sie jedes Element in localStorage durchlaufen.
Sobald wir den Schlüssel für ein gespeichertes Element haben, können wir ihn an localStorage.getItem() übergeben, um seinen Wert abzurufen.
Dann übergeben wir diesen Wert an JSON.parse(); Dies kommt aus Crockfords Bibliothek. Da wir für jede Notiz einige Werte speichern, verwenden wir JSON.stringify() am anderen Ende, um ein Objekt in eine JSON-Zeichenfolge umzuwandeln, die wir speichern. Hier konvertieren wir es von einer Zeichenfolge zurück in ein Objekt.
Schließlich übergeben wir dieses Objekt an createSticky(), wodurch es wieder in eine Haftnotiz umgewandelt wird.

createSticky

Schauen wir uns nun diese createSticky-Methode an.

    createSticky = function createSticky(data) {
        data = data || { id : +new Date(), top : "40px", left : "40px", text : "Note Here" }
        
        return $("<div />", { 
            "class" : "sticky",
            'id' : data.id
             })
            .prepend($("<div />", { "class" : "sticky-header"} )
                .append($("<span />", { 
                    "class" : "status-sticky", 
                    click : saveSticky 
                }))
                .append($("<span />", { 
                    "class" : "close-sticky", 
                    text : "trash", 
                    click : function () { deleteSticky($(this).parents(".sticky").attr("id")); }
                }))
            )
            .append($("<div />", { 
                html : data.text, 
                contentEditable : true, 
                "class" : "sticky-content", 
                keypress : markUnsaved
            }))
        .draggable({ 
            handle : "div.sticky-header", 
            stack : ".sticky",
            start : markUnsaved,
            stop  : saveSticky  
         })
        .css({
            position: "absolute",
            "top" : data.top,
            "left": data.left
        })
        .focusout(saveSticky)
        .appendTo(document.body);
    },

Ja, es ist lang, aber es wird nicht zu schwer. Beachten Sie zunächst, dass diese Funktion ein Datenobjekt verwendet. Wie wir gerade in openStickies gesehen haben, übergeben wir die gespeicherten Daten an diese Funktion. Wenn wir jedoch keine Daten übergeben (d. h. Wir erstellen eine brandneue Notiz), erstellen wir das Standardnotizobjekt. Da alle Notizen an einem Punkt erstellt werden müssen, beginnen alle Notizen mit dieser Konfiguration. Beachten Sie, dass wir für die Notiz-ID +new Date() verwenden. Dieser vorangestellte unäre Plus-Operator konvertiert das Datum, das wir vom neuen Datum erhalten, in eine Zahl, sodass diese Anweisung eine Zahl ergibt, die die Anzahl der Millisekunden seit dem 1. Januar 1970 darstellt. Offensichtlich wird sich diese Nummer ständig ändern, daher ist dies eine großartige Möglichkeit, jede Note eindeutig zu identifizieren.

Der Rest der Funktion besteht aus einer langen Reihe verketteter jQuery-Methoden. Beachten Sie, dass wir das Ergebnis zurückgeben, bevor wir dies durchgehen. Wenn wir diese Methode Entwicklern mit unserer mirco-API zur Verfügung stellen, wird ein Verweis auf das div-Element für Haftnotizen zurückgegeben.

Also, hier ist was los:

Zuerst erstellen wir das div, das die Hülle der Haftnotiz ist. Mit dieser hilfreichen jQuery 1.4-Syntax geben wir ihm eine Klasse von "sticky" und die ID aus dem Datenobjekt.
Dann stellen wir diesem einen div voran; Dieser div bekommt eine Klasse "Sticky-Header". div.sticky-header erhält dann zwei Felder, die daran angehängt werden. Der erste, span.sticky-status, erhält einen Klick-Handler, der die Funktion saveSticky aufruft. Dies ist jedoch tatsächlich eine versteckte Funktion: In diesem Bereich wird der Status des Sticky angezeigt: gespeichert oder nicht gespeichert. Es gibt verschiedene Möglichkeiten, wie der Sticky seine Daten in localStorage speichert. Es ist möglich, dass der Benutzer denkt, dass durch Klicken auf "Nicht gespeichert" die Notiz gespeichert wird. Daher stellen wir ihm diese Funktionalität zur Verfügung. Der zweite Bereich, span.close-sticky, ist die Schaltfläche zum Löschen: Wenn der Benutzer darauf klickt, wird der Sticky über die deleteSticky-Methode aus localStorage entfernt. Wir übergeben dieser Methode die Noten-ID.
Als nächstes hängen wir ein weiteres Div an das Haupt-div.sticky an. Beachten Sie, dass wir die html-Eigenschaft auf data.text setzen. Wenn wir den Text der Notiz speichern, verwenden wir die html()-Methode von jQuery, da durch die Verwendung von text() Zeilenumbrüche beseitigt werden. Wir setzen auch contentEditable:true für dieses div, da es sich um den Inhalt der Notiz handelt. Als solches erhält es auch die Klasse sticky-content. Wenn eine Taste auf diesem Div gedrückt wird (was bedeutet, dass der Benutzer den Inhalt ändert), möchten wir ihn als nicht gespeichert markieren, sodass wir diese Funktion aufrufen (die wir bald ausführen werden).
Jetzt verwenden wir die ziehbare Funktion der jQuery-Benutzeroberfläche, um unsere Haftnotiz beweglich zu machen. In unserem Parameterobjekt verwenden wir die handle-Eigenschaft, um unsere Notizen nur über die Kopfzeile zu verschieben. Die stack-Eigenschaft ist ein Selektor für die ziehbaren Elemente, die "gestapelt" werden sollen. Wenn Sie dies einstellen, wird die aktuell gezogene Notiz immer nach oben verschoben. Wenn wir mit dem Ziehen der Notiz beginnen, möchten wir sie als "nicht gespeichert" markieren (da wir auch ihre Koordinaten speichern müssen). Wenn wir mit dem Ziehen aufhören, speichern wir diese Notiz.
Als Nächstes legen wir einige Stile für unser div.sticky fest. Wir positionieren es absolut und setzen dann seine oberen und linken Werte auf die im Datenobjekt. Auf diese Weise behält die Notiz ihre Position sowie ihren Inhalt bei, wenn wir die Seite aktualisieren.
Schließlich legen wir einen Ereignishandler fest, wenn wir uns auf das Sticky focusout (klicken Sie im Wesentlichen außerhalb, nachdem Sie darauf geklickt haben): Wir möchten das Sticky speichern. Zuletzt werden wir es an den Körper anhängen. Als Referenz ist hier die HTML-Struktur, die wir hätten generieren sollen:

<div class="sticky ui-draggable" id="1281194825332" style="position: absolute; top: 40px; left: 40px;">
    <div class="sticky-header">
            <span class="sticky-status"></span>
            <span class="close-sticky">trash</span>
    </div>
    <div contenteditable="true" class="sticky-content">
        Note Here
    </div>
</div>

Und das ist unsere createSticky-Funktion.

deleteSticky

Jetzt haben wir die Funktion deleteSticky; es ist wirklich einfach:

    deleteSticky = function deleteSticky(id) {
        localStorage.removeItem("sticky-" + id);
        $("#" + id).fadeOut(200, function () { $(this).remove(); });
    },

Wie Sie sich erinnern, verwendet die Funktion deleteSticky die ID einer Notiz als Parameter. localStorage.removeItem() ist die Methode der Stunde: Wir übergeben den Schlüssel an einen lokal gespeicherten Wert, um dieses Schlüssel-Wert-Paar zu entfernen Ich würde). Dann finden wir das Element mit der angegebenen ID, blenden es aus und entfernen es. Hinweis gelöscht!

saveSticky

Der vorletzte könnte heute die wichtigste Methode sein: saveSticky: Dies ist der Klebstoff, mit dem alles funktioniert.

    saveSticky = function saveSticky() {
        var that = $(this),  sticky = (that.hasClass("sticky-status") || that.hasClass("sticky-content")) ? that.parents('div.sticky'): that,
        obj = {
            id  : sticky.attr("id"),
            top : sticky.css("top"),
            left: sticky.css("left"),
            text: sticky.children(".sticky-content").html()               
        }
        localStorage.setItem("sticky-" + obj.id, JSON.stringify(obj));    
        sticky.find(".sticky-status").text("saved");
    },

Die erste Zeile ist eine kleine Auflösung: Es gibt drei verschiedene Elemente, von denen aus wir diese Funktion aufrufen können. Zuerst werden wir this in that jQuerifizieren. Wenn das Element dann entweder die Klassen "Sticky-Status" oder "Sticky-Content" hat, erhalten wir das übergeordnete div.sticky. Wenn es keine dieser Klassen gibt, ist es selbst div.sticky, also verwenden wir das einfach.

Dann müssen wir die Werte erhalten, die wir speichern möchten. Wie Sie sehen können, erhalten wir die ID, die von oben und links versetzt ist, und den HTML-Code des untergeordneten .sticky-content. Denken Sie daran, dass wir html() anstelle von text() verwenden, da wir die Zeilenumbrüche beibehalten möchten. Dann verwenden wir localStorage.setItem, um die Daten zu speichern. Denken Sie daran, dass zwei Parameter erforderlich sind: der Schlüssel und der zu speichernde Wert. Da localStorage nur Zeichenfolgen speichert, verwenden wir JSON.stringify(), um das Objekt in eine Zeichenfolge zu konvertieren.

Zuletzt ändern Sie den Sticky-Status in "Gespeichert".

markUnsaved

Wir haben eine letzte Funktion, die nur eine Hilfsfunktion ist:

    markUnsaved = function markUnsaved() {
        var that = $(this), sticky = that.hasClass("sticky-content") ? that.parents("div.sticky") : that;
        sticky.find(".sticky-status").text("unsaved");
    }

Wieder müssen wir damit beginnen, den Verweis auf div.sticky aufzulösen; Sobald wir dies getan haben, können wir einfach die Statusspanne finden und den Text auf "nicht gespeichert" setzen.

Ob Sie es glauben oder nicht, das ist alles JavaScript.

Schritt 4: Das CSS, überarbeitet

Jetzt, da wir wissen, was unser Haftnotiz-Markup ist, können wir es stylen. Es ist ziemlich einfach. Aber schauen Sie es sich an und ich werde am Ende ein paar Kommentare abgeben:

   :focus {
        outline:0;
    }
    .add-sticky {
        cursor: default;
        position:absolute;
        top:1px;
        left:1px;
        font-size:200%;
        background:#000;
        color:#fff;
        border:2px solid #fff;
        border-radius:40px;
        -webkit-border-radius:40px;
        -moz-border-radius:40px;
        text-align:center;
        line-height:25px;
        width:30px;
        height:30px;
    }
    .add-sticky:hover {
        background: #474747;
    }
    .sticky {
        width:300px;
        background:#fdfdbe;
        box-shadow:3px 3px 10px rgba(0,0,0,0.45);
        -webkit-box-shadow:3px 3px 10px rgba(0,0,0,0.45);
        -moz-box-shadow:3px 3px 10px rgba(0,0,0,0.45);
    }
    .sticky-content {
        min-height:150px;
        border-left:3px double rgba(238, 150, 122, .75);
        margin-left:30px;
        padding:5px;
    }
    .sticky-header {
        padding:5px;
        background:#f3f3f3;
        border-bottom:2px solid #fefefe;
        box-shadow:0 3px 5px rgba(0,0,0,0.25);
        -webkit-box-shadow:0 3px 5px rgba(0,0,0,0.25);
        -moz-box-shadow:0 3px 5px rgba(0,0,0,0.25);
    }
    .sticky-status {
        color:#ccc;
        padding:5px;
    }
    .close-sticky {
        background:#474747;
        float:right;
        cursor:default;
        color:#ececec;
        padding:1px 5px;
        border-radius:20px;
        -webkit-border-radius:20px;
        -moz-border-radius:20px;
    }

Hier gibt es einige interessante Punkte:

Einige Browser setzen beim Bearbeiten des Inhalts eine Gliederung um Elemente mit contenteditable=true. Wir wollen das nicht, also werden wir es mit unserer :focus-Erklärung los.
Die Schaltfläche „Sticky hinzufügen“ befindet sich in der oberen linken Ecke. Es ähnelt vage dem "Dashboard-Widget hinzufügen" in Mac OS X.
Wir verwenden die CSS3-Eigenschaften für Rahmenradius und Kastenschatten (und die entsprechenden Inkarnationen für Herstellerpräfixe).
Wir verwenden auch rgba() für unsere Schattenfarben. Es werden vier Parameter benötigt: die Farben Rot, Gier und Blau sowie der Alpha-Wert(Transparenz).

Davon abgesehen ist es nur Ihr Standard-CSS. So sollte eine gestylte Notiz aussehen:

Schritt 5: Starten der Stickies

Nachdem wir unsere API erstellt haben, ist es an der Zeit, sie zu starten. Wir können dies über das extra leere skript-Tag in unserer Datei index.html tun:

    STICKIES.open();

Schlussfolgerung: Das Endprodukt

Nun, wir sind fertig! Hier ist das Endprodukt in Aktion:

Das ist alles, was ich heute habe. Wie wollen Sie den lokalen HTML5-Speicher verwenden, um Ihre Webprojekte aufzupeppen? Lassen Sie es mich in den Kommentaren wissen!