Webmasters Gallery

You can make the text inside any HTML element editable by adding the contenteditable attribute.

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

I wouldn’t say there are wheelbarrows full of use-cases for that, but it’s neat. One possible use might be an in-progress design in which editing the content from the design itself is useful either for you, or for someone else (a client?) who needs to change the text.

So, great, contenteditable. Now someone can click into the text and edit it.

There is nothing permanent about those changes. Refresh the page, look in another browser or whatever. Those edits are gone.

Say you wanted to do a little better job and make the changes persistent. You aren’t trying to build a CMS here, or save the data through an authenticated connection to a database or anything. You just wanna make the edits to the text are maintained if the page refreshes.

One way is to chuck the data from the text changes you make into localStorage.

1. When text is edited (on blur of the element), save the data to localStorage using a namespace and the
   ID of the element as the key.
2. When the page loads, look through localStorage and see if there are any keys that match elements on the page and, if so, replace the content.

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);
  }
}

See the Pen
localStorage + contenteditable by Chris Coyier (@chriscoyier)
on CodePen.

This reminds me of a few other things…

• document.designMode = "on" is like a shortcut for making every element on the page behave like it has contenteditable.
• Mavo is a little bit like this concept only with authentication, true data storage options, and editing UI.
• If performance is a concern, KV storage is supposed to be a speeder async version of localStorage.

The post The Browser Can Remember Edited Content appeared first on CSS-Tricks.