Kategorien
Webdesign

Storage.js und jStorage – Inhalte auf Webseiten direkt bearbeiten

Besonders für Internetprojekte, die direkt von Kunden oder technisch eher unerfahrenen Mitarbeitern gepflegt werden, ist es wichtig, eine möglichst einfache Variante zum Editieren des Inhalts bereitzustellen. Das jQuery-Plugin Storage.js bietet diese Möglichkeit mit zusätzlicher HTML5-LocalStorage-Unterstützung. So werden die geänderten Teile direkt auf dem Gerät des Nutzers zwischengespeichert. Anschließend können die Änderungen mit Hilfe von jStorage wieder ausgelesen und in die Website übernommen werden.

Storage.js
Storage.js

Der Begriff WYSIWYG steht mittlerweile bei vielen Webentwicklern auf der Beliebtheitsskala auf einer Ebene mit Frames oder Tabellen-Layouts. Das mag aber vor allem daran liegen, dass sich hinter diesem Begriff oft grausige Editoren verbergen, deren Implementierungen nicht nur mir die Nackenhaare hochstehen lassen. Das Prinzip jedoch ist meiner Ansicht nach durchaus interessant. Warum den ständigen Umweg über den Bearbeiten-Button, über das Formular zum Speichern-Button gehen, wenn das Ganze auch direkt im zu bearbeitenden Inhalt geht?

Storage.js im Einsatz

Dabei lässt man den Nutzern freie Hand über die inhaltliche Gestaltung. Das Markup bleibt unverändert und damit auch sauber. Nur hat sich in der Praxis dabei ein Problem aufgetan: Nutzer editieren einen Teil der Seite, lassen den Rest bei Seite und wollen diese später bearbeiten. Nun kann man für diesen Zweck verschiedene Möglichkeiten wie Zwischenspeichern, Revisionen etc. implementieren. Doch warum nicht dazu eins der tollen neuen HTML5-Features namens localStorage nutzen. LocalStorage ist das Mittel der Wahl, um Teile einer Seite, die der Nutzer verändert, direkt auf dessen Gerät (etwa PC, Smartphone oder Tablet) zwischen zu speichern.

Storage.js nutzt localStorage und das contenteditable-Attribut. Die Implementatio ist einfach. Lediglich jQuery und Storage.js müssen in gewohnter Weise in die Seite eingebunden werden. Anschließend sollte nun das gewünschte Element ausgewählt werden. Dazu verwendet man den jQuery-Selector auf das gewünschte Element und ruft die Funktion storage() auf. Ein Beispiel:

$('#Element').storage({storageKey:'nameOfStorageKey'});

Dabei steht „Element“ erwartungsgemäß für das zu selektierende Element und „nameOfStorageKey“ für den Namen, unter dem der geänderte Text im LocalStorage gespeichert werden soll. Ergebnis ist, dass selbst nach einem Neustart des Browsers der bearbeitete Text zur Verfügung steht und im localStorage gespeichert ist.

Storage.js API-Übersicht
Storage.js API-Übersicht

Daten auslesen und online speichern mit jStorage

Wenn der bearbeitete Text nun dauerhaft in der bearbeiteten Website gespeichert werden soll, müssen die Daten wieder aus dem localStorage gelesen werden. Denn dort sind sie ja nur, wie der Name schon sagt, lokal gespeichert. Ich persönlich verwende dafür gerne jStorage. Das jQuery-Plugin (welches auch als Plugin für Prototype und MooTools zur Verfügung steht) bietet Funktionen, die das Auslesen aus dem localStorage vereinfachen. Nehmen wir also an, wir haben den storageKey „doktorweb“ angegeben. Um den Inhalt einer JS-Variablen zu übergeben brauchen wir nichts weiter zu tun, als folgenden Code zu schreiben:

var editierterText = $.jStorage.get("doktorweb")

So befindet sich der bearbeitete Text in der Variablen. Den Inhalt nachfolgend per AJAX weiter zu verarbeiten, sollte danach kein Problem mehr darstellen.

Sollte die jStorage-Lösung nicht funktionieren, kann einfach folgende Funktion genutzt werden:

var editierterText = localStorage.getItem("doktorweb");

Diese Lösung sollte auf jeden Fall funktionieren, ganz ohne Plugins.

Wir sind übrigens immer auf der Suche nach großartigen jQuery-Plugins. Welche sollten wir unbedingt vorstellen?

(dpe)

Von Sven Schannak

ist ein leidenschaftlicher Web-Entrepreneur, freiberuflicher Web-Entwickler und stolzer Coding-Monkey.

8 Antworten auf „Storage.js und jStorage – Inhalte auf Webseiten direkt bearbeiten“

Wenn ich den string ausgelesen habe, wie kann ich ihn dan als vorgabe in einer textbox ausgeben.

Bin für jede Hilfe dankbar.

hallo liebste leute, hallo sven,

kann mir jemand zufällig ein konkretes beispiel zeigen, wie ich mit dem script einen mysql string zur datenbank feuern kann, um den inhalt in einer db zu speichern?

so in etwa: „INSERT INTO table_name (text,überschrift,…)
VALUES (‚geänderter text‘,’überschrift hier‘,….)“

das wäre supi lieb… ich steig da gerade überhaupt nicht durch.

liebste grüße aus venezuela :-*

Hallo Sven,

Danke für den interessanten Beitrag.

Der Teil mit dem „auslesen mit jStorage“ ist aber etwas verwirrend.

Ich dachte eigentlich folgendes würde gehen:

$(‚#Element‘).storage({storageKey:’nameOfStorageKey‘});
var editierterText = $.jStorage.get(„nameOfStorageKey“);

editierterText ist danach aber NULL. jStorage kann nur Werte wieder auslesen, die auch mit jStorage gespeichert wurden.
An die storage.js-Änderungen kommt man mit jStorage auf diese Weise jedenfalls nicht ran.

Gruß
Sascha

@Sascha, das war mir auch bewusst, ich wollte beim Speichern auch den Key jStorage nutzen, hatte das aber leider vergessen. Deswegen am Ende noch den Hinweis zur Standardvariante.

Ich bitte euch den sachlichen Fehler zu entschuldigen ;).

Ich finde die Idee ganz cool, ähnlich wie bei dem miniCMS gpEasy das glaub ich auch auf JS setzt.

Kann man bei der hier gezeigten Variante auch einen Log-in dann einfach über .htaccess realisieren, weil so wie hier könnte doch jeder immer die Daten ändern oder seh ich das falsch?

Gruß
Vincent

Hallo Vincent,

da deine .htaccess auf deinem Server liegt, sollte das erst Mal kein Problem sein.

Ich hab deine Frage aber auch nicht zu 100% verstanden ;).

Die Login-Daten hast du ja eh in der Session, also unabhängig vom localStorage. Im Prinzip kann aber alles was auf dem Client gespeichert ist, auch vom Client geändert werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.