1

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

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

我尝试过的方法是localStorage：

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

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

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

我正在使用“纯”JavaScript（无框架）并且没有 AJAX。任何想法，关键字？

4

2 回答 2

1

基本上有三种方法可以在 Web 上持久化数据：

  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. 从服务器端（常用方法）、cookies（有限空间）或本地存储（仅在较新的浏览器上，您必须解决错误）中进行选择来存储它
  3. 当您将其从存储中取出时，对其进行反序列化，构建 DOM 元素并根据需要将事件绑定到这些元素。

希望有帮助。

于 2012-05-29T20:36:47.027 回答
0

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

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

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

于 2012-05-30T10:23:43.403 回答