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

本教程演示了如何使HTML元素可编辑并使用localStorage持续进行这些编辑。展示了浏览器记住编辑内容的能力，解决了刷新消失的临时变化问题。

将contenteditable属性添加到任何HTML元素中，都将其转换为可编辑的区域，类似于Textarea。

<div contenteditable="">
  该文本现在可以编辑！
</div>

虽然在广泛应用程序中有限，但此功能证明对快速进行过程中的设计编辑或客户反馈很有用。但是，用contenteditable变化并不持久。页面刷新或浏览器更改会擦除它们。

为了维护各个页面刷新的编辑， localStorage提供了一个简单的解决方案。这涉及两个步骤：

1. 保存编辑：失去焦点（ blur事件）后，使用唯一键（例如，“ dataStRoade-”元素ID）将元素的InnerHTML保存到localStorage 。
2. 还原编辑：在页面加载上，通过localStorage迭代，识别与页面元素匹配的密钥。如果找到匹配，请还原保存的InterHTML。

这是JavaScript代码：

 const editables = document.queryselectorall（“ [[contendeadible]））;

//保存在模糊上的编辑
editables.foreach（el => {
  el.AddeventListener（“ Blur”，（）=> {
    localstorage.setItem（“ datastorage-” el.id，el.innerhtml）;
  }）;
}）;

//还原负载上的编辑
对于（让key in localstorage）{
  if（key.includes（“ dataStorage-”））{
    const ID = key.replace（“ dataStorage-”，“”）;
    document.queryselector（“＃” id）.innerhtml = localstorage.getItem（key）;
  }
}

此方法提供了一种直接的方法来持续编辑，而无需复杂的数据库集成。相关概念包括：

• document.designMode = "on" ：启用所有页面元素的编辑。
• MAVO：具有身份验证和数据存储的更强大的解决方案。
• KV存储：一种可能更快的替代品替代localStorage 。

以上是浏览器可以记住编辑的内容的详细内容。更多信息请关注PHP中文网其他相关文章！