Blog.

Autosave in Webformularen

Für mein kommendes Blogsystem wollte ich ja möglichst unkompliziert und minimalistisch bleiben. Was mich aber total genervt hat ist, dass ich letztens einen längeren Text "verloren" habe, da ich im Eifer des Gefechts den Browser geschlossen haben.

Browser zu = Text weg. Damit mir das nicht noch mal passiert habe ich mir was gebastelt.

Kurz zur Situation vorher:

Ich habe das Erstellen eines Blogs imm auf die selbe Art realisiert, wie man einen Kommentar programmiert. Also 1 Formular, welches beim Abschicken den Eintrag in der Datenbank erstellt. Ohne Speicher kein Eintrag. Um Autosave (und auch mein neues Filemanagement) zu realisieren läuft das nun etwas anders.

Man wählt "Neuer Eintrag" und es wird direkt ein (leerer) Eintrag erstellt. Das Erstellen ist also das, was vorher "Bearbeiten" war. Da ich nun vor dem ersten Buchstaben bereits einen gespeicherten Eintrag habe, kann ich ihn nun automatisch in einem bestimmten Abstand speichern.

Realisiert habe ich das mit jQuery und dem grandiosen Plug-In "Ajaxform".

Der Code, der nun die Arbeit im Hintergrund übernimmt schaut so aus:

var autosaveNow = setInterval(

function(){

var uhrZeit = Date();

$('#myForm').ajaxSubmit();

$('#saveinfo').html('Saved at ' + uhrZeit);

},60000);

Das Form hat die ID "myForm". Alle 60 Sekunden wird nun per Ajax das Formular übermittelt und speichert damit die aktuellen Stand der Textarea ab. Zusätzlich zeigt ein der Div "saveinfo" die Urhzeit an, an der die Funktion zuletzt gestartet wurde.

Alles in allem eine sehr einfache und unkomplizierte Sache, die aber eine Menge Arbeit ersparen kann.

Ein kleines Beispiel gibt es hier