Change color and set a cookie

Question

I'm new with Javascript and in the community of Stack Overflow. I created a script to change the style of specific elements, and this is the result:

HTML:

<div id="menu"></div>
<div id="cols">
    <div id="cols_1"></div>
    <div id="cols_2"></div>
</div>
<div id="center">
    <div id="green">Green</div>
    <div id="bordeaux">Bordeaux</div>
</div>

Javascript:

document.getElementById("green").onclick = function() {colorGreen()};
document.getElementById("bordeaux").onclick = function() {colorBordeaux()};
function colorGreen() {
    document.getElementById("menu").style.borderBottom = "3px solid #448F44";
    document.getElementById("cols_1").style.borderTop = "3px solid #448F44";
    document.getElementById("cols_2").style.borderTop = "3px solid #448F44";
}
function colorBordeaux() {
    document.getElementById("menu").style.borderBottom = "3px solid #E8920C";
    document.getElementById("cols_1").style.borderTop = "3px solid #E8920C";
    document.getElementById("cols_2").style.borderTop = "3px solid #E8920C";
}

JSFiddle: https://jsfiddle.net/mshy3vrh/2/

I read some manual on how to use cookies in JavaScript but I haven't a clear idea of how to use them. I wanted to ask if with this script, someone can show me how to set a cookie: when someone change color, clicking the span with id green or bordeaux, the information is stored and if you refresh the page remains the selected color until the user clean the browser's cache. That way I can have a clear idea of how they should be used.

Best regards, Keaire

Answer 1

This fiddle should work.

https://jsfiddle.net/mshy3vrh/5/

For this answer I used the code snippet found within the second answer of this question posted by Mandeep Janjua

    function createCookie(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=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

document.getElementById("green").onclick = function() {colorGreen()};
document.getElementById("bordeaux").onclick = function() {colorBordeaux()};
var x = readCookie('color')
if (x === 'green') {
    colorGreen();
} else if(x === 'bordeaux'){
 colorBordeaux();   
}

function colorGreen() {
    document.getElementById("menu").style.borderBottom = "3px solid #448F44";
    document.getElementById("cols_1").style.borderTop = "3px solid #448F44";
    document.getElementById("cols_2").style.borderTop = "3px solid #448F44";
    createCookie('color','green',7);
}
function colorBordeaux() {
    document.getElementById("menu").style.borderBottom = "3px solid #E8920C";
    document.getElementById("cols_1").style.borderTop = "3px solid #E8920C";
    document.getElementById("cols_2").style.borderTop = "3px solid #E8920C";
    createCookie('color','bordeaux',7);
}