Formularwerte in Cookie speichern

  1. Sie füllen ein Formular aus.
  2. Sie speichern die Werte in einem Cookie.
  3. Beim nächsten Aufruf der Seite wird das Formular mit den gespeicherten Werten vorausgefüllt.

Ausprobieren! (Erklärung im Quelltext)

Und so funktionierts:

  1. Das <form>-Tag des Formulars wird um zwei Attribute erweitert:
    class="preset"
    Das Formular wird als vorausgefüllt gekennzeichnet.
    id="name"
    Auf einer Seite kann es mehrere vorausgefüllte Formulare geben. Im id-Tag geben Sie an, unter welchem Namen die Voreinstellungen gespeichert werden sollen.
  2. Sie markieren die Felder des Formulars, deren Inhalte gespeichert werden sollen. Dazu erweitern Sie das jeweilige <input>-, <textarea>- oder <select>-Tag um das Atribut class="save".
  3. Sie legen optional Knöpfe zum Löschen, Speichern und Laden des Cookies an:

    <button type="button" class="erase">Loeschen</button>
    <button type="button" class="store">Speichern</button>
    <button type="button" class="recall">Laden</button>

    Das Skript weist den Knöpfen je nach Klassennamen die richtige Funktion zu.
    Das Beispiel-Stylesheet blendet darüberhinaus nicht benötigte Knöpfe aus.

  4. Sie binden die JavaScript-Datei in den Kopf der Seite ein: 
    <script type="text/javascript" src="formpreset.js"></script>
  5. Die Initialisierungsfunktion wird automatisch nach dem vollständigen Laden der Seite aufgerufen.

Style-Angaben:

Das Script hinterlegt den aktuellen Speicherzustand als Klassenname am <form>-Tag, und zwar:

preset_clean
Der aktuelle Zustand des Formulars ist im Cookie gespeichert (im Beispiel: grün).
preset_dirty
Der aktuelle Zustand des Formulars ist noch nicht im Cookie gespeichert (im Beispiel: gelb).
preset_error
Der letzte Zugriff auf das Cookie ist gescheitert (im Beispiel: rot).

Die Dateien: