使用 jquery 缓存 JSON 对象并检索它答案

【问题标题】：Cache JSON object using jquery and retrieve it使用 jquery 缓存 JSON 对象并检索它
【发布时间】：2012-09-26 18:59:46
【问题描述】：

我想在页面中缓存以下 JSON 对象，以便在另一个页面上检索它。

var test = {
        "lists":["list1","list2","list3","list4","list5"],
        "maps": {  
            "key4":"value4","key3":"value3","key5":"value5","key2":"value2","key1":"value1"
        },
        "number1":123456789,
        "numberarray1":[1,2,3,4,5,6,7,8,9],
        "string1":"A",
        "stringarray1":["A1","B1"]
    }

如何缓存它并再次检索它？

这可能吗？如果没有，还有其他方法可以保存我的 JSON 对象，然后在另一个页面上检索它。

谢谢。

【问题讨论】：

如果“其他页面”是一个完全不同的页面，需要刷新页面才能访问它，您可以存储它的唯一方法是通过 cookie 或 HTML5 存储，这两者都是仅字符串存储。
您需要使用cookie 或localstorage
是的，我说的是 html。那么如何通过 jquery 保存 cookie？如果数据是机密的，使用起来安全吗？
我可以使用 jquery 进行用户会话吗？

标签： jquery caching

【解决方案1】：

您是在谈论 HTML 中的缓存吗？您始终可以使用LocalStorage，这将使其可用于同一域中的任何页面。

如果您将其与 Modernizr 和 cookie 结合使用，您最终可以获得某种解决方案。

【讨论】：

【解决方案2】：

保存那美味的饼干

$.cookie("test-data", JSON.stringify(test));

拿回那个甜甜的饼干

var test =  JSON.parse($.cookie("test-data"));

http://www.electrictoolbox.com/jquery-cookies/

【讨论】：

我在使用 cookie 时遇到的问题是它是永久性的。如果（test == null）...我不能这样做...然后创建一个 cookie 否则...使用保存的 cookie...因为如果json 对象已更新。
好吧，不管你如何存储它，网络数据库或cookie，这都是一个问题。
您能否详细说明您正在尝试做什么？最终产品应该是什么？
我通过调用 url 收到了一个 json 对象，但检索它很慢... 2 分钟/检索...我需要在我的两个页面中使用该 json 对象...这就是为什么我需要保存它才能非常快速地检索它。所以如果我重新加载我的页面，或者如果我转到下一页，加载会更快。注意：那个 json 对象可以改变......所以我不能将它存储在 cookie 中
这就是为什么我认为我只需要缓存数据......因为它更有可能是临时的？

【解决方案3】：

除了提供的答案之外，在更复杂的场景中，我建议使用jStorage 插件。

来自网站的描述：

jStorage 是一个跨浏览器的键值存储数据库，用于存储数据本地浏览器 - jStorage 支持所有主流浏览器，包括在桌面（是的，甚至是 Internet Explorer 6）和移动设备中。此外，jStorage 与库无关，它适用于任何同一网页上的其他 JavaScript 库，无论是 jQuery、Prototype、 MooTools 或其他东西。虽然你仍然需要有一个页面上的第三方库（Prototype、MooTools）或 JSON2 支持较旧的 IE 版本。

jStorage 支持存储字符串、数字、JavaScript 对象、数组甚至是原生 XML 节点。 jStorage 还支持设置 TTL 值用于自动过期的存储密钥和 - 最重要的是 - 通知其他人键已更改或发布/订阅时的选项卡/窗口来自相同或另一个选项卡/窗口的事件，这使得 jStorage 也用于 Web 应用程序的本地 PubSub 平台。

如果页面上加载了 jStorage，则除了常规的 $.jStorage 方法外，还会在 IE6 和 IE7 中添加 localStorage 和 sessionStorage polyfills。您可以将常规 setItem/getItem 方法与 polyfill 一起使用，但也可以使用 getter/setter - localStorage.mykey = myval;对 jStorage 绝对有效。 唯一的缺点是不能使用 onstorage 事件，需要回退到 listenKeyChange 代替。

jStorage 非常小，压缩后约为 10kB，压缩后约为 4kB。

【讨论】：