如何通过书签小工具保存页面body编辑内容并实现刷新留存？

核心思路是用当前页面的URL作为LocalStorage的唯一标识key，存储body的HTML内容；点击书签时，完成「恢复保存内容 ↔ 切换编辑状态 ↔ 保存修改内容」的闭环操作。

完整书签代码 #

直接把下面这段代码复制到书签的「网址」栏即可：

javascript:(function(){
  // 用当前页面URL生成唯一存储键，避免不同页面内容互相覆盖
  const storageKey = 'page_edits_' + window.location.href;
  const savedContent = localStorage.getItem(storageKey);
  
  // 如果有已保存内容且当前未处于编辑状态，先恢复内容
  if (savedContent && !document.body.isContentEditable) {
    document.body.innerHTML = savedContent;
    alert('已恢复之前的编辑内容');
  }
  
  // 切换body的可编辑状态
  document.body.contentEditable = !document.body.isContentEditable;
  
  if (!document.body.isContentEditable) {
    // 关闭编辑时，保存当前body的HTML到LocalStorage
    localStorage.setItem(storageKey, document.body.innerHTML);
    alert('编辑内容已保存，刷新页面后再次点击书签可恢复');
  } else {
    alert('已进入编辑模式，修改完成后再次点击书签即可保存');
  }
})();

代码逻辑拆解 #

1. 唯一存储键：通过window.location.href拼接存储键，确保每个页面的编辑内容独立存储，不会和其他页面的内容冲突。
2. 恢复内容：每次点击书签时，先检查LocalStorage中是否有当前页面的保存内容，如果有且当前未处于编辑状态，直接把保存的HTML替换到body中。
3. 切换编辑状态：点击书签会切换contentEditable的布尔值，实现「编辑/退出编辑」的切换。
4. 自动保存：退出编辑模式时，自动将当前body的innerHTML存入LocalStorage，完成持久化。

注意事项 #

• LocalStorage是域名隔离的，不同域名下的页面无法访问彼此的存储内容，安全性有保障；
• 保存的是静态HTML，如果页面有动态交互（比如JS生成的元素、事件绑定），恢复后这些动态效果会丢失，仅适合静态内容的编辑保存；
• 如果不需要保存整个body，只想保存特定元素，把代码中所有document.body替换成目标元素选择器即可，比如document.querySelector('.content-area')；
• 要清除某页面的保存内容，可在浏览器控制台执行：localStorage.removeItem('page_edits_' + window.location.href)。

内容的提问来源于stack exchange，提问作者LordJuicy