CSS, HTML und Javascript mit {stil}

HTML contenteditable mit Javascript localStorage speichern

Session Storage

Beliebigen Inhalt direkt auf der Webseite mit einem einzigen Attribut ändern – ohne Friemelei mit textarea – das funktioniert mit dem HTML-Attribut contenteditable seit IE 8 zuverlässig in allen Browsern.

Der Inhalt, den ein Benutzer in das HTML-Element setzt, ist allerdings flüchtiger Natur. Wenn die Seite neu aufgerufen wird, ist der frisch eingefügte Inhalt verschwunden.

Erst Javascript kann den eingefügten Inhalt über längere Zeit haltbar machen. Am Ende der Zeile weitere Einträge einfügen:

  • Montag: Javascript Programmierung

<div>
   <ul id="editable" contenteditable>
      <li>Montag: Javascript Programmierung</li>
   </ul>
</div>
…
<button id="speichern">Liste speichern</button>
<button id="loeschen">Liste löschen</button>

Die Liste besteht nur aus einem einzigen Eintrag, aber ein Besucher kann die Liste durch eigene Einträge ergänzen.

Damit die Liste Bestand hat, auch wenn der Benutzer die Webseite / App verlässt, müssen die Einträge gespeichert werden. In diesem Beispiel speichert localStorage die Daten im Browsern des Benutzers.

<script type="text/javascript">
var listEditable = document.getElementById('editable');
$('#speichern').click(function (e) {
   e.preventDefault();
   localStorage.setItem('liste', listEditable.innerHTML);
});
$('#loeschen').click(function (e) {
   e.preventDefault();
   localStorage.setItem('liste', localStorage.clear());
   location.reload();
});

loadListManager();

function loadListManager() {
   if (localStorage.getItem('liste')) {
      listEditable.innerHTML = localStorage.getItem('liste');
   }
}
</script>

Wenn der editierbare Bereich z.B. die Grundlage für einen webbasierten Kalender ist, könnte z.B. localStorage die Daten für eine gewisse Zeit im Browser des Benutzers speichern und sie dann in einen haltbareren Speicher (wie lange ein localStorage besteht, lässt sich nicht vorhersagen und der localStorage ist auf 5 bis 10 MB je nach Browser beschränkt) übertragen.