Anzeige
Smartes Cloud Hosting für anspruchsvolle Projekte.
↬ Loslegen und Spaces testen ↬ Jetzt testen!
Dieter Petereit 16. November 2012

Garlic.js und Sisyphus.js: jQuery-Plugins sichern Formularinhalte mit HTML5-LocalStorage

Das Problem ist so alt wie Formulare selbst. Und je länger das Formular, desto größer das Problem. Eines natürlich, das nicht stets und ständig auftritt, sondern lediglich dann, wenn man unter Zeitdruck ist oder das ausgefüllte Formular teils schwierig zu beschaffende Informationen enthält. Das Senden des Formulars schlägt fehl, man schließt versehentlich den Browser-Tab, drückt dummerweise auf F5 oder welchen Unfug man sonst noch zu treiben vermag. Ergebnis: Das Formular ist wieder jungfräulich. Alle Inhalte sind weg. Die jQuery-Plugins, die ich Ihnen jetzt vorstellen werde, versprechen, diesen Effekt zu verhindern.

Wix Webseiten — echt superpraktisch. ↬ Mehr erfahren

Anzeige

Garlic.js und Sisyphus.js: Niemals wieder ein Formular doppelt ausfüllen

Besonders Betreiber von eCommerce-Seiten werden das Problem sofort erkennen. Wenn potenzielle Kunden ein Formular mehrfach ausfüllen müssen, sinkt deren Abschlussfreudigkeit exponentiell. Mit anderen Worten: Der Warenkorb wird mitten im Laden stehen gelassen.

Auch andere Webnutzer kennen das Erlebnis, mindestens einmal, ich sicherlich dutzendfach, bereits eingegebene Formulardaten aus den unterschiedlichsten Gründen erneut erfassen zu müssen. Nicht immer liegt es an der Ungelenkheit der eigenen Finger, auch Seitenbetreiber können ihren Anteil am Problem tragen.

Garlic.js und Sisyphus.js, zwei recht junge Plugins für jQuery schaffen Abhilfe. Dabei ist Sisyphus das etwas ältere und ausgereiftere Projekt. Garlic.js macht in den letzten Tagen von sich reden, da es eben erst aus der Taufe gehoben wurde und Lösungen für das Formularproblem stets gern genommen werden.

Beide Plugins arbeiten im Prinzip gleich. Beide verlangen nach einem modernen Browser, da sie LocalStorage, die lokale Speichervariante aus HTML5 einsetzen. Fallbacks und Ports für ältere Browser, etwa Shims für IE 6/7 bieten beide nicht, wären aber für Leute mit JavaScript in den Fingern recht leicht nachträglich einzubauen. In den Links zum Beitrag findet sich ein entsprechender Ansatz.

Die beiden Plugins funktionieren in der Grundkonfiguration mit einfachen Anweisungen. Nachdem das jeweilige Script nebst jQuery im Head der Seite eingebunden ist, reicht folgende Vorgehensweise:

Garlic.js:

Das Data-Attribut ist jedem Formular beizufügen, das von Garlic geschützt werden soll. Sind mehrere auf der gleichen Seite, ist jedes einzeln damit auszustatten.

Sisyphus.js arbeitet nicht mit einem Data-Attribut, sondern mit einem Function Call:

$('#form1, #form2').sisyphus();

Sie sehen, Sie können innerhalb des Calls mehrere Formulare spezifizieren. Um alle Formulare einer Seite zu schützen, reicht der kürzere Aufruf:

$('form').sisyphus();

Für Sisyphus stehen weitere Optionen zur individuellen Konfiguration zur Verfügung. Diese dienen dazu, weitere Funktionen in Abhängigkeit zu den diversen Formularzuständen ausführen zu lassen. Hier zeigt Sisyphus seinen größeren Leistungsumfang.

Dennoch sollte man nicht vorschnell Sisyphus den Vorzug geben. Erstens verspricht Garlic-Entwickler Guillaume Potier einen schnellen Funktionszuwachs, zweitens ist die Verwendung von Data-Attributen zur Steuerung der Funktionalität eine Vorgehensweise, die manchem eher liegen wird. Ich jedenfalls kann mich damit anfreunden.

Wird das Formular ordnungsgemäß versendet oder willentlich zurückgesetzt, werden die zuvor gesicherten Daten aus dem LocalStorage gelöscht. Eine Speicherung der Werte fand während meiner Tests übrigens immer nur dann statt, wenn ich das jeweilige Feld mit dem Tabulator verlassen habe. Klickte ich mich mit der Maus durch das Formular, blieb der LocalStorage leer. Aber, Verbesserungspotenziale muss es geben. Wer will schon Perfektion vom Start weg?

Links zum Beitrag:

  • Dokumentation zu Garlic.Js – Garlicjs.org
  • Demo und Doku zu Sisyphus.Js – Github
  • Simultan-Übersetzer von localStorage zu UserData (IE-proprietär) – Github

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

Ein Kommentar

  1. ich habe bei meinen projekten sisyphus im einsatz und kann es nur empfehlen :)

Schreibe einen Kommentar

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