More lines in one Cookie

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


    });
});

Now when a user clicks on fg2 it will change the color (gradient) but it won't save it into a cookie. It only works for Chrome. I want to make gradients and there are more variants to do that for each browser. So I want to add these gradient in one "background".

Why don't you just read the background value that is set? – epascarello Feb 23 '15 at 18:08 — epascarello, Feb 23 '15 at 18:08

void · Answer 1 · 2015-02-23T18:26:54.123

0

Why don't you use localstorage, I won't prefer cookies until and unless they are created by server.

SET

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

GET

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"));

And then use which one you want to use.

edited Feb 23 '15 at 18:26

answered Feb 23 '15 at 18:15

void

36,090
8
62
107

Ok. But how can I use the bgColors? I nver used localstorage. How can i add those bgColors in my div? – Hemran Feb 23 '15 at 18:26
localstorage is no rocket science, It is even much simpler then cookies. `opt` is the array having the codes. `opt[0]` is for `webkit` `opt[1]` for `moz` and so on. So just use them wherever you want. – void Feb 23 '15 at 18:28
1

I agree that localstorage is the way to go. You could argue how widely supported and persistent it is though. – mritz_p Feb 23 '15 at 18:33
I am too dumb to get it :D. How can i change my bg . When i add "background" : opt[1], it wont work. – Hemran Feb 23 '15 at 18:40
What error it is giving? I guess it should work. I checked it in my console. – void Feb 23 '15 at 18:43

score 0 · Answer 2 · edited May 23 '17 at 11:43

I really wouldn't suggest using cookies for a use case like this. This is not what cookies are intended to be used for. If you absolutely must use them, and you want to use a more complex data structure, you could serialize ("stringify") your data and then store it in a 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));

Then, at a later instance, you can parse the string and subsequently re-create the initial object:

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

Beware of the maximum cookie size though.

More lines in one Cookie

2 Answers2