更改颜色并设置 cookie

Question

我是 Javascript 和 Stack Overflow 社区的新成员。我创建了一个脚本来更改特定元素的样式，结果如下：

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/

我在 JavaScript 中阅读了一些关于如何使用 cookie 的手册，但我不清楚如何使用它们。我想问一下，如果使用这个脚本，有人可以告诉我如何设置 cookie：当有人更改颜色时，单击带有 id 绿色或波尔多的跨度，信息将被存储，如果您刷新页面，则保持所选颜色直到用户清理浏览器的缓存。这样我就可以清楚地知道应该如何使用它们。

此致，凯尔

Answer 1

这个 fiddle 应该有效。

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

对于这个答案，我使用了在 Mandeep Janjua

发布的 this question 第二个答案中找到的代码片段

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

更改颜色并设置 cookie

Change color and set a cookie

javascript

cookies