使用 HTML5 缓存 JSON 对象答案

【问题标题】：Cache a JSON object with HTML5使用 HTML5 缓存 JSON 对象
【发布时间】：2011-10-18 16:01:55
【问题描述】：

首先我想提一下，我是一名实习生，在技术领域几乎没有经验，所以如果我的问题的答案似乎很明显，我很抱歉。几天来我一直试图找到答案，但几乎没有什么可证明的。

我的项目是开发电话目录。我现在要做的是有一个经常搜索的框，显示自用户开始使用该应用程序以来搜索到的前十名。我打算用以下信息制作一个 JSON 对象，然后在客户端缓存结果：

var myJSONObject = {"searched": [       {"firstname":firstName,"lastname":lastName,"PK":pk,"phone":phonenumber,"email":emailaddress,"bu":businessunit,"company":company,"building":building, "fax":fax, "timesvisited":"accumulator to keep track of visits to the name"}

] };

我现在很头疼的是弄清楚如何缓存 JSON 对象。我创建了一个清单文件，并且我知道如何缓存某些文件，例如 css 文件，但是您如何缓存诸如上面列出的代码之类的内容，以便存储数据并且可以在第二次访问页面之前调出?

【问题讨论】：

没有...啊，算了:)
哈哈.. 就像我说的，我对此很陌生...但是你的权利。放手可能是件好事；）。

标签： json html

【解决方案1】：

您可以使用本地存储，它在 Firefox 3.5、IE 8 和 Chrome 4 及更高版本中受支持。将缓存保存到本地存储：

localStorage['jsoncache'] = JSON.stringify(myJSONObject);

要检索它：

myJSONObject = JSON.parse(localStorage['jsoncache']);

请注意，您只能在本地存储中存储字符串，而不是任何类型的对象。如果您愿意，可以将 jsoncache 键更改为其他值。

【讨论】：

这种情况下jsoncache会是同目录下的.txt文件吗？
本地存储的物理存储方式由实现定义。我假设大多数浏览器会使用某种数据库，因为它会更快。无论如何，浏览器不太可能会使用一个文本文件，每个键，每个页面。
我的 json 对象是 15 MB，还有其他可用的缓存吗？

【解决方案2】：

我并不完全了解如何创建、维护和检索对象，但如果通过 Ajax 加载它，则可以使用 HTTP 缓存。

如果您只想将其存储在本地，则可以使用localStorage（只有较新的浏览器支持）：

// Serialize and store
localeStorage['topten'] = JSON.stringify(myJSONObject)

// Retrieve and deserialize
var myJSONObject = JSON.parse(localeStorage['topten'])

【讨论】：

谢谢你:)。您的回答和上面的回答对我来说非常清楚。