通过 localstorage 存储并还原 document.body.innerhtml，可实现编辑状态跨刷新持久化：编辑时保存 html，再次点击时自动加载并启用 contenteditable。
通过 localstorage 存储并还原 document.body.innerhtml，可实现编辑状态跨刷新持久化：编辑时保存 html，再次点击时自动加载并启用 contenteditable。
要让网页编辑操作（如通过 contentEditable 修改页面主体内容）在刷新后不丢失，核心思路是：将编辑后的完整 HTML 结构序列化存储，并在需要时反序列化还原。localStorage 是浏览器端轻量、持久、同源可用的键值存储方案，非常适合此场景。
以下是一个功能完备、开箱即用的 Bookmarklet 实现：
javascript:(function() {
if (document.body.isContentEditable) {
// 当前处于编辑模式 → 保存修改
localStorage.setItem('editedContent', document.body.innerHTML);
alert('✅ Changes saved!');
} else {
// 当前非编辑模式 → 尝试加载并恢复
const savedContent = localStorage.getItem('editedContent');
if (savedContent !== null) {
document.body.innerHTML = savedContent;
document.body.contentEditable = true;
alert('? Content restored — editing enabled.');
} else {
alert('⚠️ No saved content found. Start editing first!');
}
}
})();
? 使用说明：
- 将上述代码拖入书签栏创建 Bookmarklet；
- 点击一次启用编辑（contentEditable = true），任意修改页面内容；
- 再次点击 — 若已编辑过，则自动保存；若未编辑过但有历史保存，则自动还原并重入编辑态；
- 刷新页面后，再次点击即可立即恢复上次编辑状态。
⚠️ 注意事项与优化建议：
- 仅保存 body 内容：本方案只操作 document.body.innerHTML，不涉及 head、script 或事件绑定，因此不会保存动态行为（如已绑定的 JS 事件监听器会丢失），适合静态内容调整；
- XSS 风险提示：若页面曾注入含 <script> 的恶意 HTML 并被保存，还原时可能重新执行 — 生产环境应增加 HTML 清洗（如使用 DOMPurify.sanitize()）； </script>
- 存储容量限制：localStorage 单域名通常限 5–10 MB，对普通文档绰绰有余，但超长富文本建议考虑压缩或分块策略；
- 跨设备/浏览器不同步：localStorage 不同步至其他设备或浏览器，仅限当前浏览器+当前域名；
- 兼容性：isContentEditable 和 localStorage 均支持 IE9+ 及所有现代浏览器，无兼容性顾虑。
✅ 总结：该 Bookmarklet 以极简代码实现了「编辑→保存→还原→再编辑」的闭环体验，是前端快速原型、内容校对或无障碍调试的实用小工具。如需增强功能（如版本快照、撤销栈、CSS 样式保留），可在本基础之上扩展 DOM diff 或引入轻量状态管理逻辑。
