如何用JavaScript书签小工具重置页面至执行前初始状态（无需刷新）

很遗憾，浏览器并没有原生的javascript:reset-state()这类一键恢复方法——毕竟浏览器不会自动记录你对DOM做的每一处修改。不过我们可以通过提前手动保存初始状态的方式，实现无刷新恢复，下面分享几种实用的方案：

方案1：深克隆初始DOM节点 #

这种方式会完整复制页面的初始DOM结构（包括所有元素、属性和内联事件），恢复时直接替换当前DOM树。

第一步：创建「保存初始状态」书签 #

把下面的代码添加为浏览器书签：

javascript:(function(){
  // 深克隆整个根节点（包含所有子元素和属性）
  window.__savedDOM = document.documentElement.cloneNode(true);
  alert("初始DOM状态已保存，随时可以恢复！");
})();

你需要在运行任何修改页面的书签之前，先点击这个书签保存状态。

第二步：创建「恢复初始状态」书签 #

当你想恢复时，点击这个书签：

javascript:(function(){
  if (window.__savedDOM) {
    // 用保存的DOM替换当前根节点
    document.documentElement.replaceWith(window.__savedDOM);
    // 清理保存的变量，避免占用内存
    delete window.__savedDOM;
    alert("页面已恢复至初始状态！");
  } else {
    alert("还没保存过初始状态哦，请先执行保存操作～");
  }
})();

⚠️ 注意：这种方法不会恢复通过JS绑定的非内联事件（比如用addEventListener添加的监听），也不会重置定时器、AJAX请求这类动态状态。

方案2：保存初始HTML字符串 #

如果你希望连页面的脚本、样式都完全恢复到加载时的状态，可以保存整个页面的HTML源码，恢复时重新写入。

保存状态书签 #

javascript:(function(){
  // 保存整个根节点的HTML字符串
  window.__savedHTML = document.documentElement.outerHTML;
  alert("初始HTML已保存！");
})();

恢复状态书签 #

javascript:(function(){
  if (window.__savedHTML) {
    // 重新打开文档并写入初始HTML
    document.open();
    document.write(window.__savedHTML);
    document.close();
    alert("页面已完全恢复！");
  } else {
    alert("请先保存初始状态～");
  }
})();

这种方式相当于在不刷新页面的情况下重新渲染了初始页面，所有动态状态（表单输入、定时器等）都会被重置，适合需要彻底恢复的场景。

方案3：利用浏览器历史API（进阶技巧） #

如果你只是做了局部DOM修改，可以结合history.pushState和popstate事件来实现状态切换：

1. 在修改DOM前，用history.pushState把当前DOM状态存入历史记录；
2. 恢复时触发popstate事件，读取保存的状态并恢复DOM。

不过这种方式需要修改你的「修改页面书签」的代码，把状态保存逻辑整合进去，相对复杂一些，适合有JS基础的开发者自定义。

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