【问题标题】:jquery save json data object in cookiejquery在cookie中保存json数据对象
【发布时间】:2011-05-12 14:54:21
【问题描述】:

如何将 JSON 数据保存在 cookie 中?

我的 JSON 数据如下所示

$("#ArticlesHolder").data('15', {name:'testname', nr:'4',price:'400'});
$("#ArticlesHolder").data('25', {name:'name2', nr:'1', price:'100'});
$("#ArticlesHolder").data('37', {name:'name3', nr:'14', price:'60'});

我想做一些类似的事情

var dataStore = $.cookie("basket-data", $("#ArticlesHolder").data());

并检索我想将其加载到 $("#ArticlesHolder") 中的数据

$.each($.cookie("basket-data"), function(i,e){
 $("#ArticlesHolder").data(i, e);
});

有人知道我是否走在正确的轨道上,还是应该以其他方式完成?简而言之,我如何从 cookie 中放入和提取 json 数据?

【问题讨论】:

  • 只是迂腐,但您的问题中没有“JSON 数据”。您有一些通过对象文字表示法定义的 JavaScript 对象(不是 JSON,JSON 是对象文字表示法的子集),但那里没有 JSON。 json.org 不过,您几乎肯定希望使用 JSON 作为将对象存储在 cookie 字符串中的数据格式。

标签: jquery cookies jquery-cookie


【解决方案1】:

将数据序列化为 JSON 和 Base64,依赖 jquery.cookie.js :

var putCookieObj = function(key, value) {
    $.cookie(key, btoa(JSON.stringify(value)));
}

var getCookieObj = function (key) {
    var cookie = $.cookie(key);
    if (typeof cookie === "undefined") return null;
    return JSON.parse(atob(cookie));
}

:)

【讨论】:

    【解决方案2】:

    您可以将数据序列化为 JSON,如下所示:

    $.cookie("basket-data", JSON.stringify($("#ArticlesHolder").data()));
    

    然后从cookie中获取:

    $("#ArticlesHolder").data(JSON.parse($.cookie("basket-data")));
    

    这依赖于 JSON.stringify() and JSON.parse() 来序列化/反序列化您的数据对象,对于旧版浏览器 (IEjson2.js 以获取 JSON 功能。此示例使用jQuery cookie plugin

    【讨论】:

    • 自古以来 Opera 的 cookie 中不允许使用 JSON my.opera.com/community/forums/… 我也有这个错误。即使@cookie@ 插件使用@encodeURIComponent@,pbug 也不应该出现。
    • 这个问答让我相信cookie 是jQuery 中的一个内置函数。似乎不是。还是已弃用..?如果是我找到的插件,链接到它会很好避免混淆......
    • @TJ 确实是一个插件,jQuery cookie 插件。你可以在这里找到它:plugins.jquery.com/cookie 我真的很想知道为什么它现在不在核心中......
    • 在某些浏览器中使用它时要小心。 ,(逗号)字符可能会导致无法在 safari 和其他浏览器中正确设置 cookie。
    • 如果不需要 jQuery,您也可以使用这个出色的轻量级 cookie 库。 [developer.mozilla.org/en-US/docs/Web/API/document/cookie]lib
    【解决方案3】:

    JSON.stringify(userData) 返回的值保存到cookie 中是不好的做法;这可能会导致某些浏览器出现错误。

    在使用它之前,你应该把它转换成base64(使用btoa),阅读它时,从base64转换(使用atob)。

    val = JSON.stringify(userData)
    val = btoa(val)
    
    write_cookie(val)
    

    【讨论】:

    • 你有没有提到有问题的浏览器?
    • 我在 django 平台上的 chrome 上使用 json 列表作为 cookie。它有一些问题。此外,最好向用户隐藏 cookie 传递的实际数据
    • 在服务器端,Python 的标准 cookie 处理将拒绝包含 {} 的 cookie,并在 cookie 标头中静默丢弃被拒绝 cookie 之后的所有 cookie。
    • RFC6265 中的 Cookie 规范不允许使用诸如 " 之类的字符。这可能会导致服务器忽略请求中的某些 cookie。
    【解决方案4】:

    现在已经不需要显式使用JSON.stringify。执行这行代码就行了

    $.cookie.json = true;
    

    之后,您可以将任何对象保存在cookie中,读取cookie时会自动转换为JSON并从JSON返回。

    var user = { name: "name", age: 25 }
    $.cookie('user', user);
    ...
    
    var currentUser = $.cookie('user');
    alert('User name is ' + currentUser.name);
    

    但是jquery.cookie没有自带JSON库,所以需要自己下载并包含在jquery.cookie.js之前的html页面中

    【讨论】:

    • 我在没有 $.cookie.json = true 的情况下尝试了这种方法,并将 [object object] 作为我的 cookie 值。然后将其设置为true并尝试将对象直接传递给cookie并且没有填充cookie。
    • @jacobross85 我认为我们中的一些人可能正在使用旧版本的 jquery.cookie.js,请检查源代码,有时错误的文件处于活动状态。
    • 请注意,这将导致 cookie 被普遍视为 JSON。因此,盲目添加$cookie.json = true 可能会导致与您的其他cookie 发生冲突。因此,在其他地方已经使用 cookie 的项目上使用它时要小心!
    • 你有什么解决复杂json的办法吗?我的 json 中有一个 json 数组,其中一些属性包含 json 和 ....
    【解决方案5】:

    使用JSON.stringify(userData) 将json对象转换为字符串。

    var dataStore = $.cookie("basket-data", JSON.stringify($("#ArticlesHolder").data()));
    

    为了从 cookie 中恢复,请使用 JSON.parse()

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

    【讨论】:

      【解决方案6】:

      试试这个: https://github.com/tantau-horia/jquery-SuperCookie

      快速使用:

      创建 - 创建 cookie

      检查 - 检查存在

      验证 - 如果是 JSON,则验证 cookie 值

      check_index - 验证 JSON 中是否存在索引

      read_values - 将 cookie 值读取为字符串

      read_JSON - 将 cookie 值读取为 JSON 对象

      read_value - 读取存储在 JSON 对象中的索引值

      replace_value - 从存储在 JSON 对象中的指定索引中替换值

      remove_value - 删除存储在 JSON 对象中的值和索引

      只需使用:

      $.super_cookie().create("name_of_the_cookie",name_field_1:"value1",name_field_2:"value2"});
      $.super_cookie().read_json("name_of_the_cookie");
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2021-04-24
        • 2014-04-20
        • 2012-02-20
        • 1970-01-01
        • 2011-08-03
        • 2017-09-10
        • 2015-05-22
        相关资源
        最近更新 更多