使用页面加载/卸载时的值保存和重新加载DIV结构

Question

我在页面上有一个<div id="populated">元素，用于接收动态创建的内容，包括填充的DIV，文本区域，输入文本和复选框。此外，还有一些元素addEventListener。

我的问题是：如何保存这个“填充”的DIV并在用户返回页面时重新加载它？

我尝试过使用localStorage：

• 将整个DIV保存为序列化对象（获取here提示）。问题：“未捕获的TypeError：在无法选择的输入元素上访问selectionDirection。”

• 将整个DIV保存为innerHTML。问题：1）绑定事件丢失2）已输入的数据在textareas /输入中丢失。

我可以重新绑定事件，但解析DIV结构并为每个元素存储/恢复.value似乎太复杂了。

我正在使用“纯粹的”JavaScript（没有框架）而没有AJAX。任何想法，关键词？

Answer 1

基本上有三种方法可以在网络上保存数据：

1. 服务器端
2. 本地存储
3. 缓存

现在，Cookie可以存储的数量有限（而且IIRC的限制因浏览器而异），所以如果您的DIV中有相当数量的内容，那么Cookie就不会削减它。本地存储适用于较新的浏览器...如果它可以正常工作（您应该将您的存储错误发布为它自己的单独的SO帖子）。

至于存储什么，你基本上可以放弃存储绑定事件...除非你想将每个转换成一个内联属性（例如“onclick ='...”）并保存所有HTML ...但这将是一个糟糕的主意，因为内联事件很快就会成为一场噩梦。 （如果你只有一两个这个可能是一个选项...但我在建议它时会畏缩。）

通常做的是将数据序列化为仅包含数据的结构（没有DOM，没有事件等）。您存储（但是您选择），然后当您想要“加载”它时，您反序列化它，构建您需要的任何DOM元素并在此时连接您想要的任何事件。 JSON.stringify（存在于较新的浏览器中，或者通过Crockford的JSON库提供，如果你想支持旧版本）是执行此序列化的一个选项，jQuery的serialize和serializeArray方法也是如此。或者你可以推出自己的解决方案。

简而言之：

1. 仅序列化您要保存的数据（通过JSON.stringify，$ .serialize或$ .serializeArray，或您自己的函数）
2. 选择服务器端（常用方法），Cookie（有限空间）或本地存储（仅限较新的浏览器，您必须解决错误）才能存储
3. 当你从存储中取出它时，反序列化它，构建DOM元素并根据需要将事件绑定到这些元素。

希望有所帮助。

Answer 2

需要进行一些重新设计，但我设法解决了这个问题：

1. DIV的结构在innerHTML onpageonload的{​​{1}}上存储为localStorage。
2. DIV中字段的值被序列化并存储在localStorage。
中
3. 绑定函数是独立的，可以调用它来解析整个DIV。

在onbeforeunload上，抄写员通过DIV保存“内部HTML”和值。在加载时，脚本会检查localStorage是否为空：如果没有，则填充DIV，加载值并重新绑定事件。