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

时间:2013-10-01 14:12:21

标签: function cookies jquery-cookie jquery

我有工作代码,可以点击设置和清除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,无需插件即可使用。

1 个答案:

答案 0 :(得分:1)

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