浏览器可以记住编辑的内容

您可以通过添加contenteditable属性使任何 HTML 元素内的文本可编辑。

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

我不会说有成堆的用例，但它很简洁。一个可能的用途可能是正在进行的设计，其中从设计本身编辑内容对您或其他人（客户？）很有用，他们需要更改文本。

所以，很棒，contenteditable。现在有人可以点击文本并编辑它。

这些更改不是永久性的。刷新页面，查看另一个浏览器或任何其他操作。这些编辑都消失了。

假设您想做得稍微好一点，并使更改持久化。您不是要在这里构建一个CMS，也不是通过经过身份验证的连接到数据库来保存数据。您只是想在页面刷新时保持对文本的编辑。

一种方法是将您对文本所做的更改中的数据放入localStorage中。

1. 当文本被编辑时（在元素的blur事件中），使用命名空间将数据保存到localStorage中，并使用
   元素的ID作为键。
2. 页面加载时，查看localStorage并查看是否有任何键与页面上的元素匹配，如果有，则替换内容。

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

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的
localStorage + contenteditable。
在 CodePen 上。

---

这让我想起了其他一些事情……

• document.designMode = "on"就像一个快捷方式，可以让页面上的每个元素都像具有contenteditable一样。
• Mavo有点类似于这个概念，只是它具有身份验证、真正的存储选项和编辑UI。
• 如果性能是一个问题，KV 存储 应该是一个更快的异步版本的localStorage。