HTML5 本地存储（XML/JSON 数据）答案

【问题标题】：HTML5 localStorage (XML/JSON data)HTML5 本地存储（XML/JSON 数据）
【发布时间】：2012-01-07 05:22:42
【问题描述】：

我有一个如下所示的 XML 文件：

<itemnumbers>
<item>
<itemno>123</itemno>
<desc>Desc about 123</desc>
</item>

<item>
<itemno>456</itemno>
<desc/>
</item>

...

</itemnumbers>

我想使用 HTML5 localStorage 来存储数据（并检索以便更快地访问），因为 XML 数据不会定期更改。

我打算先把它转成JSON，然后存入localStorage。我应该在代码中这样做还是在 .JSON 文件而不是 .xml 文件中预先存储数据？

以后如何解析数据？目前我正在使用 jQuery 代码来解析...类似于：

$(this).find("itemno").each(function()
{
$(this).text();
$(this).next().text()
}

上面的代码在 JSON 转换后可以工作吗？

我想就解决此问题的最佳方法提出建议。

【问题讨论】：

XML是字符串，JSON是字符串，localStorage可以保存字符串。为什么要更改数据格式？
JSON 的轻量级格式......我认为 XML 需要更长的时间来解析......
如果它在 XML 文件中，为什么不将数据存储在 .js（作为 JSON）文件中并完成它呢？就解析 XML 而言，JavaScript 可以很好地解析 XML，而且您会过早地进行优化...
好吧，我对直接存储为 .json 的想法持开放态度....但我想知道如何进行解析和所有操作的详细信息...
XML 和 JSON 不是模棱两可的格式。你的 XML 非常简单，所以你可能会没事，但通常你会在从 XML 迁移到 JSON 时失去一些数据完整性

标签： javascript jquery xml json html

【解决方案1】：

我同意您可以继续使用 XML 的一些 cmets。如果要转换为 JSON，可以在 javascript 中使用 For In 循环来循环它，就像在 javascript 中使用对象一样。

您的 JSON 数据：

{"itemnumbers": 
    { "item": {"itemno": 123, "desc": "Desc about 123"} }
    { "item": {"itemno": 456, "desc": "Desc about 456"} }
}

遍历您的数据，其中数据是上面的 JSON 对象：

for (item in data.itemnumbers) {
    //do something with item data
    console.log(data.itemnumbers[item].itemno);
    console.log(data.itemnumbers[item].desc);
}

要将对象保存在 localStorage 中，您必须将其转换为字符串格式，您可以将其作为对象再次取回。您可以使用 JSON.stringify() 将对象变为字符串并使用 JSON.parse() 将其拉出：

//saving object to localStorage
localStorage['my_data'] = JSON.stringify(data);

//fetching object from localStorage
data = JSON.parse(localStorage['my_data']);

请注意，IE7 及以下版本不支持这些方法，因此您需要找到与它们兼容的解析库。这是一篇可能有助于兼容性的帖子：

Safely turning a JSON string into an object

【讨论】：

为此非常感谢....这解决了我的前半部分问题....如何将其保存到 HTML5 localStorage 并在可用时检索？
您需要将对象作为字符串保存到localStorage。我将编辑答案以包含一个示例

【解决方案2】：

我建议您编写一个脚本，将 XML 数据转换为 JSON，然后将其发送到客户端并保存。

稍后在需要时解析 JSON，这很容易做到。就像下面这样：-

var jsonObject = JSON.parse(yourObjectInJSON);

循环遍历它：-

for (item in jsonObject.itemnumbers) {
//do something with item data
}

【讨论】：