Question

我一直在寻找互联网，似乎找不到与我的需求相关的文章。我之前从未使用过cookie，但我认为这可能是一项简单的任务...... 事实证明我错了：/

基本上我有一个颜色选择器，我希望浏览器每次设置时都能记住颜色集，这样当它们返回到站点时，背景颜色与它们离开时的颜色相同。

我正在使用此颜色选择器http://lindekleiv.bitbucket.org/colorpicker/

使用此代码

$(document).ready(function(){
    $('#colorpicker').colorPicker({
    colorChange: function(e, ui) {
    $('body').css({backgroundColor: ui.color})
    }
    });

    $('#colorpicker').colorPicker('setColor', 0, 0, 6, 1);
})

提前感谢您的帮助:) 克里斯

Answer 1

您可以使用我写的这个非常简单的cookie处理对象：

var Cookie = {
    set: function(name, value, days) {
        if (days) {
            var date = new Date();
            date.setTime(date.getTime()+(days*24*60*60*1000));
            var expires = "; expires="+date.toGMTString();
        } else { var expires = ""; }

        document.cookie = name + "=" + value + expires + "; path=" + location.pathname;
    },

    unset: function(name) { Cookie.set(name, "", -1); },

    get: function(name) {
        var search = new RegExp(name + "=([^;]*);");
        var result = search.exec(document.cookie);
        return result ? result[1] : undefined;
    }
};

所以你的代码会变成：

$(document).ready(function(){
    $('#colorpicker').colorPicker({
        colorChange: function(e, ui) {
            $('body').css({backgroundColor: ui.color});
            Cookie.set('bgc', $('body').css('background-color'), 365);
        }
    });

    $('#colorpicker').colorPicker('setColor', 0, 0, 6, 1);

    if (Cookie.get('bgc')) {
        $('body').css({ backgroundColor: Cookie.get('bgc') });
    }
});

Answer 2

实际上非常简单。您可以使用以下方法设置背景颜色的cookie：

document.cookie = "color=" + color;

回想一下用这个保存的cookie：

var color = loadCookies();

function loadCookies(){
    var cookie_string = document.cookie ;
    if (cookie_string.length != 0) {
        var cookie_value = cookie_string.match (
                    '(^|;)[\s]*' +
                    "color" +
                    '=([^;]*)' );
        return decodeURIComponent ( cookie_value[2] ) ;
    }
}

记住背景颜色/颜色与Cookie

2 个答案: