CSS, HTML und Javascript mit {stil}

HTML contenteditable mit Javascript localStorage speichern

HTML content editable mit Javascript localstorage speichern

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 macht den eingefügten Inhalt über das Schließen des Browserfensters hinaus haltbar.

Text im Memo bleibt beim Reload oder Schließen des Browserfensters erhalten, wird aber nicht auf dem Server gespeichert, sondern im Local Storage des Browsers.


Local Storage löschen
<div id="memo-pad">
   <pre id="memo" contenteditable="true" onkeyup="storeUserMemo(this.id);"></pre>
</div>

<div class="demotext">
   <span class="clear-button" onclick="clearLocal();">
      Local Storage löschen
   </span>
</div>

Ein Element, das mit contenteditable="true" ausgeschildert ist, ist sofort beschreibbar – ähnlich wie ein textarea-Feld.

Damit der Inhalt des Memos bei einem Reload erhalten bleibt, müssen die Einträge gespeichert werden. In diesem Beispiel speichert Local Storage die Daten im Browsern des Benutzers.

Der Benutzer muss das Memo nicht speichern, sondern der Inline-Aufruf onkeyup="storeUserMemo(this.id);" speichert den Inhalt bei jedem Loslassen einer Taste. Javascript-Aufrufe als HTML-Attribut sind verrufen, aber hier halten sie das Beispiel überschaubar.

function storeUserMemo (id) {
   var memo = document.getElementById("memo").innerHTML;
   localStorage.setItem("userMemo",memo);
}

function getUserMemo () {
   if ( localStorage.getItem("userMemo")) {
      var memo = localStorage.getItem("userMemo"); 
   } else {
      var memo = "Schreib einen Roman oder eine Einkaufsliste oder nur ein paar Wörter!";
   }
   document.getElementById("memo").innerHTML = memo;
}

function clearLocal() {
   localStorage.clear(); 
   document.getElementById("memo").innerHTML = "Schreib einen Roman oder eine Einkaufsliste oder nur ein paar Wörter!";
}

// Initialisierung – mal sehen, ob schon ein Memo vorliegt
getUserMemo();

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 übertragen. Wie lang ein Local Storage besteht, lässt sich nicht vorhersagen und zudem ist Local Storage auf 5 bis 10 MB je nach Browser beschränkt.