HTML contenteditable mit Javascript localStorage speichern

HTML content editable und Javascript local storage 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.

Content editable und Local Storage

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.

Local Storage – einfacher als Cookies

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) {
   let memo = document.getElementById("memo").innerHTML;
   localStorage.setItem("userMemo",memo);
}

function getUserMemo () {
   if ( localStorage.getItem("userMemo")) {
      let memo;
      memo = localStorage.getItem("userMemo"); 
   } else {
      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();

Local Storage ähnelt zwar Cookies, aber anders als Cookies gibt LocalStorage über Name/Wert-Paare einen direkten Zugriff auf die Einträge, während das Script den Cookie-String in Handarbeit auflösen muss.

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.

contenteditable hat keine Events … oder doch?

Es gibt kein spezielles change-Event für Elemente mit Content Editable, aber das input Event feuert nicht nur bei input- und textarea-Elementen, sondern auch bei Elementen mit dem contenteditable-Attribut.

let memo = document.getElementById("memo");
memo.addEventListener ("input", function () {
	console.log("Wer ändert hier sein Memo?");
});

oninput ist mitteilsam und meldet sich bei jedem Tastendruck.

Nicht IE11. Wer hätte das gedacht?