是否可以缓存/存档整个 Web 文档（包括 DOM 的精确状态）并稍后重新加载？
想象一下，我们已经加载了一个包含大量 Javascript 的复杂网站，该网站通过 AJAX 加载各种信息并根据用户输入进行计算。所以，现在假设我们想要以这样的方式存档它，以便我们可以稍后从文件中可靠地加载它（甚至可能没有互联网连接）并研究它的行为/调试它/等等。有没有办法做到这一点？
imagine that we have loaded a complex website with lots of Javascript which loaded all sort of info via AJAX and by making computations based on user input. So, now suppose we want to archive it in such a way that we can reliably load it later on from file (maybe even without an internet connection) and study its behavior / debug it / etc. Is there a way to do this?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
浏览器已经这样做了，以使“后退”按钮快速工作——在 Firefox 中，它被称为“bfcache”。不过，该缓存仅存在于内存中。我不知道是否可以将其序列化为文件，如果可以的话，那会很有趣。
The browsers already do this to make the "Back" button work fast -- in Firefox it's called "bfcache". This cache lives only in memory, though. I don't know if it's possible to serialize it to a file, if yes, it would be very interesting.
我认为没有办法在不手动查看每个部分并存储它的情况下导出整个 DOM 状态。表示 DOM 的信息比源代码中可见的信息要多。
例如，您可能希望将窗口对象中可用的窗口滚动条位置保存为
window.scrollX和window.scrollY。这只是一个示例，但还有大量其他状态信息需要保存，包括附加的事件处理程序等。如果您可以识别与您的目的相关的部分而忽略其他部分，则可以使用 Google Gears（现已过时）或HTML5 中引入的新本地存储，如果您已经序列化此信息，则可以将其传递到某个服务器并从那里恢复它。 HTML5 中的新存储机制称为 DOM 存储，但它有点误导，因为它只是一个键值对存储，其中键和值都是字符串。
编辑：这可能是对问题的不同看法，但事实就是如此。您可以只存储初始状态以及更改它的相关操作，而不是存储整个 DOM 状态。为了达到最终状态，将使用重播机制来按顺序运行每个操作。这是一种流行的设计模式，称为命令模式。这就是多人游戏如何通过仅传递玩家操作（如击键、鼠标移动等）而不是整个视图来使每个玩家保持最新和同步，并且接收者应用这些操作来更新其状态。这比实践中要复杂得多，但这就是关键。
I don't think there's a way to export the entire DOM state without manually looking at each piece, and storing it. There is a lot of information that goes in representing that DOM than what visible in the source.
For instance, you might want to save the window scrollbar position which is available in the window object as
window.scrollXandwindow.scrollY. This is just one example but there's plenty of other state information to be saved including attached event handlers etc.If you could identify the pieces that are relevant for you purposes while ignoring others, you could store it locally using Google Gears (now obsolete) or the new Local Storage introduced in HTML5 and if you are already serializing this information, you could pass it on to some server and restore it from there. The new storage mechanism in HTML5 is called
DOM Storagebut its a little misleading because it's just a key value pair storage where both the keys and values are strings.Edit: This might be a different perspective on the problem but here it goes. Instead of storing the entire DOM state, you could store just the intial state, and the relevant actions that change it. To get to the final state, a replay mechanism would be used that runs each action in sequence. This is a popular design pattern known as the Command pattern. That's how multiplayer games keep each player up-to-date and in-sync by passing only the player actions like a keystroke, mouse movement, etc. instead of the entire view and the receiver applies those actions to update its state. It's a lot more complicated than that in practice but thats the crux of it.
您想将其存储在哪里？
目前还没有办法在浏览器端存储任何内容（除了很少有人安装的新浏览器功能之外）。如果 DOM 足够小，唯一现实的解决方案就是使用 Cookie（这是因为 Cookie 只能保存一定量的数据）。
如果您正在考虑在服务器端存储 DOM，那么您可以使用
document.body.innerHTML来访问当前 DOM 状态，然后将其发送到您的服务器。Where would you want to store it?
Currently there's no way to store anything browser side (apart from new browser features, that very few people have installed). The only realistic solution would be in a Cookie if the DOM is small enough (this is because a Cookie can only hold a certain amount of data).
If you're looking at storing the DOM server-side, then you could use
document.body.innerHTMLto access the current DOM state and then send it to your server.