HTML contentEditable mit Javascript localStorage speichern

ContentEditable und Local Storage

Während in einem textarea-Element keine weiteren HTML-Elemente enthalten kann, dürfen in ein HTML div oder ein Custom Element beliebige HTML-Tags gesetzt werden. 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 ähnlich wie Cookies im Local Storage des Browsers.

<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.

const 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?