Der Browser kann bearbeitete Inhalte speichern

Sie können den Text innerhalb jedes HTML-Elements bearbeitbar machen, indem Sie das Attribut contenteditable hinzufügen.

<div contenteditable>
  Hey, I'm like a textarea kinda now!
</div>

Ich würde nicht sagen, dass es dafür Hunderte von Anwendungsfällen gibt, aber es ist nett. Ein möglicher Anwendungsfall könnte ein Entwurf sein, bei dem das Bearbeiten von Inhalten direkt aus dem Entwurf heraus entweder für Sie oder für jemand anderen (einen Kunden?) nützlich ist, der den Text ändern muss.

Also, großartig, contenteditable. Jetzt kann jemand in den Text klicken und ihn bearbeiten.

Diese Änderungen sind nicht dauerhaft. Aktualisieren Sie die Seite, schauen Sie in einem anderen Browser nach oder was auch immer. Diese Bearbeitungen sind weg.

Sagen wir, Sie möchten es ein kleines bisschen besser machen und die Änderungen dauerhaft speichern. Sie versuchen hier nicht, ein CMS zu bauen oder die Daten über eine authentifizierte Verbindung zu einer Datenbank zu speichern oder so etwas. Sie möchten nur, dass die Änderungen am Text beibehalten werden, wenn die Seite aktualisiert wird.

Ein Weg ist, die Daten aus den Textänderungen, die Sie vornehmen, in localStorage zu werfen.

1. Wenn Text bearbeitet wird (beim blur des Elements), speichern Sie die Daten mit einem Namespace und der
   ID des Elements als Schlüssel in localStorage.
2. Wenn die Seite geladen wird, durchsuchen Sie localStorage und prüfen Sie, ob es Schlüssel gibt, die mit Elementen auf der Seite übereinstimmen, und ersetzen Sie gegebenenfalls den Inhalt.

const editables = document.querySelectorAll("[contenteditable]");

// save edits
editables.forEach(el => {
  el.addEventListener("blur", () => {
    localStorage.setItem("dataStorage-" + el.id, el.innerHTML);
  })
});

// once on load
for (var key in localStorage) {
  if (key.includes("dataStorage-")) {
    const id = key.replace("dataStorage-","");
    document.querySelector("#" + id).innerHTML = localStorage.getItem(key);
  }
}

Sehen Sie den Pen
localStorage + contenteditable von Chris Coyier (@chriscoyier)
auf CodePen.

---

Das erinnert mich an ein paar andere Dinge…

• document.designMode = "on" ist wie eine Abkürzung, um jedes Element auf der Seite so zu behandeln, als hätte es contenteditable.
• Mavo ähnelt diesem Konzept nur mit Authentifizierung, echten Datenspeicheroptionen und Bearbeitungs-UI.
• Wenn die Leistung ein Anliegen ist, soll KV storage eine schnellere asynchrone Version von localStorage sein.