是否可以缓存/归档整个 Web 文档（包括 DOM 的精确状态）并在以后重新加载？

Posted 2023-03-06

【中文标题】是否可以缓存/归档整个 Web 文档（包括 DOM 的精确状态）并在以后重新加载？

【英文标题】：can entire web document be cached/archived (including the precise state of the DOM) and later reloaded?

【发布时间】：2010-01-10 22:37:48

【问题描述】：

想象一下，我们已经加载了一个包含大量 javascript 的复杂网站，该网站通过 AJAX 加载各种信息，并根据用户输入进行计算。所以，现在假设我们想要以这样一种方式存档它，以便我们以后可以可靠地从文件中加载它（甚至可能没有互联网连接）并研究它的行为/调试它/等等。有没有办法做到这一点？

【参考方案1】：

浏览器已经这样做以使“返回”按钮快速工作——在 Firefox 中它被称为“bfcache”。不过，这个缓存只存在于内存中。不知道能不能序列化成文件，如果能，那就很有意思了。

【参考方案2】：

我认为没有一种方法可以导出整个 DOM 状态，而无需手动查看每个部分并存储它。表示该 DOM 的信息比源代码中可见的信息要多。

例如，您可能希望将窗口对象中可用的窗口滚动条位置保存为window.scrollX 和window.scrollY。这只是一个示例，但还有很多其他状态信息需要保存，包括附加的事件处理程序等。

如果您可以识别与您的目的相关的部分而忽略其他部分，您可以使用 Google Gears（现已过时）或 html5 中引入的新 Local Storage 将其存储在本地，如果您已经序列化此信息，您可以将它传递到某个服务器并从那里恢复它。 HTML5 中的新存储机制称为DOM Storage，但它有点误导，因为它只是一个键值对存储，其中键和值都是字符串。

编辑：这可能是对问题的不同看法，但就是这样。您可以只存储初始状态以及更改它的相关操作，而不是存储整个 DOM 状态。为了达到最终状态，将使用重放机制按顺序运行每个动作。这是一种流行的设计模式，称为Command pattern。这就是多人游戏如何通过仅传递诸如击键、鼠标移动等玩家动作而不是整个视图来使每个玩家保持最新和同步的方式，并且接收器应用这些动作来更新其状态。这比实际操作要复杂得多，但这就是它的症结所在。

【参考方案3】：

你想把它存放在哪里？

目前没有办法在浏览器端存储任何东西（除了新的浏览器功能，很少有人安装）。如果 DOM 足够小，唯一现实的解决方案是使用 Cookie（这是因为 Cookie 只能保存一定数量的数据）。

如果您正在考虑在服务器端存储 DOM，那么您可以使用 document.body.innerHTML 访问当前 DOM 状态，然后将其发送到您的服务器。

【讨论】：

这不是真的。查看 Google Gears 或 Firefox 3.5 中的新功能。

“目前无法在浏览器端存储任何内容。”您可能想阅读 HTML5 localStorage。

当然可以，但它不足以用于任何实际应用程序。

实际上使用本地存储已经有几年了——几乎所有主流浏览器都以一种或另一种方式支持它。我已经为 firefox/ie/safari 编写了一个小型包装库来完成此任务。 domcached.com

@Andris，这有多便携？我刚刚在我的 Chrome 上测试了它，但它不起作用。