用于数据存储的隐藏 html 表答案

【问题标题】：Hidden html table for data storage用于数据存储的隐藏 html 表
【发布时间】：2012-02-07 16:24:28
【问题描述】：

我已经构建了一个处理一组数据的单页 Web 应用程序：

2,000 到 3,000 项
每个项目都具有相同的属性：州、城市、街道、邮政编码

我目前正在通过 AJAX 检索数据并将它们存储在一个对象数组中（每个数组元素都是一个对象，其中包含州、城市、街道、邮政编码的键/值）。

我正在考虑修改我的代码，将我的项目存储在一个隐藏的 html 表中：

每项一行
每个属性一列（州、市、街道、邮政编码）

我看到的主要好处是：当他们在异地工作时，用户可以将我的页面保存到离线工作，因为隐藏表是 DOM 的一部分。

表格也是一种方便的格式，所有浏览器都能理解（我需要支持 IE 7），并且每个单元格都可以通过其坐标轻松访问（rows[i].cells[j]）。

我有点担心 DOM 遍历的性能，但我认为我可以将表格与 DOM 分离，并且仅在用户保存页面时附加它。

我错过了什么吗？在我的情况下，为什么使用隐藏表进行数据存储不是一个好主意？

【问题讨论】：

将其写入 HTML5 规范并使用本地化存储
听起来很酷，但如果您要经常在客户端操作数据，我肯定会使用 jQuery 让您的生活更轻松。
@thenetimp +1 ，但是 IE7 支持吗？
您是否有理由削弱任何体面的浏览器的功能？我建议您使用 WebSQL / IndexedDB 并回退到 IE 7 等浏览器的本地 javascript 变量。因此，当您重新加载页面时，它仍然在体面的浏览器中存储数据。
window.name 最多可容纳 4MB 的字符串数据。对于 IE7，您可以将 JSON 字符串化并推入其中。

标签： javascript json data-storage

【解决方案1】：

使用 JSON。这是迄今为止访问客户端数据的最有效和最快的方式。使用表遍历 DOM 会慢一个数量级。您也可以轻松地将 JSON 数据保存为任何数据库或存储系统中的文本 blob。

EXT.js 框架广泛使用 JSON，我发现它是完成这项工作的绝佳工具。

【讨论】：

可能是个愚蠢的问题，但如果表与 DOM 分离，遍历不会更快吗？
会的。我同意，但 JSON 是 JavaScript 本身原生的，因此比任何形式的外部钩子都要快。

【解决方案2】：

如果你使用的是 .NET，你可以用文字把它放在页面的头部。

页面加载上的 JSON

<script type="text/javascript">

    var table1 = [      
    // First Row
    {"Column1" : "Col1Data", 
      "Column2" : "Col2Data",
     "Column3" : "Col3Data" },

    // Second Row
    {"Column1"  : "Col1Data",  
     "Column2" : "Col2Data",
     "Column3" : "Col3Data" }
     ]

</script>

然后您可以通过以下方式访问数据：

table1[rowNum].ColumnName;

【讨论】：

当然，这也是为什么表格看起来是一个不错的选择的另一个原因。我目前的问题和担忧更多是关于表格的缺点。
JSON 会比选择 dom 元素更快，但是如果你想拥有离线功能，如果他们重新加载页面，数据将在 html 中可用，但在 json 中不可用。但是，如果您在页面加载时将数据存储在 say 脚本中的 json 对象中，它也会在离线页面加载中存在，这可能会更快。您可能必须在服务器端生成该脚本并以这种方式传递它，以便数据保留在实际的 html 中。
@Christophe 我已经更改了上面的答案以在页面加载时创建一个 JSON 对象。如果你走这条路，只需确保实际数据在 html 页面中，否则无法离线工作，因为浏览器需要页面中的数据来创建 JSON 对象。