Question

$("#fg2").click(function() {
    //Chrome
    var bgColor = '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5))';
    //Firefox
    var bgColorff = '-moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%)';
    //Chrome 10+
    var bgColorch = '-webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%)';
    //Opera
    var bgColoro = '-o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%)';
    //ie10
    var bgColorie = '-ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%)';

    var fcolor = 'black';

    $.cookie('background', bgColor);
    $.cookie('background', bgColorff);
    $.cookie('background', bgColorch);
    $.cookie('background', bgColoro);
    $.cookie('background', bgColorie);



    $("#nav").css({
        "background": bgColor

    });
        $("#nav ul li a").css({
        "color": fcolor

    });
            $("#mbar h3").css({
        "color": fcolor

    });
            $("#mbar p").css({
        "color": fcolor

    });
    $("#nav").css({
        "background": bgColorff


    });
    $("#nav").css({
        "background": bgColorch


    });
    $("#nav").css({
        "background": bgColoro


    });
    $("#nav").css({
        "background": bgColorie


    });

    $("#mbar").css({
        "background": bgColor


    });
});

现在，当用户点击fg2时，它会更改颜色（渐变），但不会将其保存到Cookie中。它仅适用于Chrome。我想制作渐变，并且每种浏览器都有更多变体。所以我想在一个＆＃34;背景＆＃34;。

中添加这些渐变

Answer 1

为什么不使用localstorage，我不会喜欢cookies，除非它们是由服务器创建的。

设置

localStorage.setItem("background", "#ffffff,#e5e5e5");

获取

function readLS(color) { var col = color.split(","); bgColor = []; bgColor[0] = '-webkit-gradient(linear, left top, left bottom, color-stop(0%,'+col[0]+'), color-stop(100%,'+col[1]+'));'; bgColor[1] = '-moz-linear-gradient(top, '+col[0]+' 0%, '+col[1]+' 100%);'; bgColor[2] = '-webkit-linear-gradient(top, '+col[0]+' 0%,'+col[1]+' 100%);'; bgColor[3] = '-o-linear-gradient(top, '+col[0]+' 0%,'+col[1]+' 100%);'; bgColor[4] = '-ms-linear-gradient(top, '+col[0]+' 0%,'+col[1]+' 100%);'; return bgColor; } var opt = readLS(localStorage.getItem("background"));

然后使用你想要使用的那个。

Answer 2

我真的不建议在这样的用例中使用cookie。这不是cookie的用途。如果您绝对必须使用它们，并且想要使用更复杂的数据结构，则可以serialize ("stringify") your data然后将其存储在cookie中：

var myCss = {
    'bgColor' : '-webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5))',
    'bgColorff' : '-moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%)',
    'fcolor' : 'black'
}

$.cookie('background', JSON.stringify(myCss));

然后，在稍后的实例中，您可以parse the string并随后重新创建初始对象：

var stillMyCss = JSON.parse($.cookie('background'));

谨防maximum cookie size。

一个Cookie中有更多行

2 个答案: