处理大型 cookie 或使用本地存储 - jquery 和 jquery cookie 插件答案

【问题标题】：handling large cookies or using local storage - jquery and jquery cookie plugin处理大型 cookie 或使用本地存储 - jquery 和 jquery cookie 插件
【发布时间】：2013-10-02 01:12:50
【问题描述】：

我有在点击时设置和清除 cookie（记住 div 的样式）的工作代码：

var originalAttributes = $('.aaa').attr('style');
$('.aaa').each(function(){
    var d = $(this),
    id = d.attr('id'),
    storedStyle = $.cookie('aaaStyle' + id);
    if (storedStyle != undefined){   //style stored
        d.attr('style', storedStyle);
    }
});

//mouse event functions for class="aaa"

$('#save').click(function () {
    $('.aaa').each(function(){
        var d = $(this),
        id = d.attr('id'),
        style = d.attr('style');
        if (style != originalAttributes){   //style changed
            $.cookie('aaaStyle' + id, style, { expires: 30 });
        }
    });

});

$('#clear').click(function () {
    // unset changes
    $('.aaa').attr('style',originalAttributes).each(function(){
        var d = $(this),
        id = d.attr('id');
        $.cookie('aaaStyle' + id, null);
    });
});

http://jsfiddle.net/z8KuE/31/

唯一的问题是当我必须处理大量相同类的 div 时 - cookie 大小可以达到 500kb 或更多。浏览器仅支持每个 cookie 4kb。

所以问题是——如何使用这个函数和 jquery cookie 插件来避免这个问题？ - gzip 或 / 并将 cookie 分成足够小的部分？

（无论哪种方式，最好进行某种压缩以加快性能（如果可能 - 但如果没有，没关系））

编辑：如何使用本地存储实现相同的“保存 - 清除”功能？

edit2：由 user2111737 (http://jsfiddle.net/z8KuE/33/) 解决 - 使用本地存储而不是 cookie，并且无需 cookie 插件即可工作。

【问题讨论】：

我猜你不需要保存那么多东西 - 保存真实数据，然后通过任何类型的模板语言重建标记。
我不知道该怎么做。你能告诉我（更新这个小提琴）吗？
如果您的 cookie 变得这么大，您应该考虑其他选项，例如 localStorage。请记住，如果这些 cookie 设置为 *.yourdomain.com，它们会附加到每个请求中，因此会对性能（流量）造成巨大影响。
我知道了，所以我更新了这个问题。问题是我不知道如何做到这一点。

标签： function cookies jquery-cookie jquery

【解决方案1】：

如果您不需要在服务器端访问它，或者最终可以使用 xmlhttprequest 手动将此数据发送到服务器，我认为您应该尝试 localStorage，最终使用 sessionStorage 而不是 cookie，那么您有 20mb（IE 中为 200但与其他网站共享）。关于压缩 - 您可以考虑自定义格式并使用动态存储的数据重建 html 代码 - 例如。我怀疑这个类绝对可以是任何东西 - 我想它可以保存为数字 - 甚至更好 - 一个字符。它为您提供了 255 个保存为一个标志的类

【讨论】：

事情是我想实现一个简单的“保存/清除”解决方案，它可以在没有配置文件和类似东西的情况下工作，并且可以记住访问者的选择。
但是 localStorage 是为浏览器保存的——它根本不会过期。我不知道有多少人同时使用 3 个浏览器，你不需要配置文件或任何保存：localStorage.setItem('variablename', 'value')，清除：localStorage.removeItem('name')
我明白了。你能告诉我如何为我的功能实现这个（更新小提琴）吗？我对此完全陌生。
你的意思是 $.cookie 应该被替换为 $.localStorage.setItem ？
jsfiddle.net/z8KuE/32 我不确定 $ 是否与 window 相同，但可能不是，我没有使用 jQ，所以我不知道。我想它会像你预期的那样工作