添加 Cookie 以输入背景颜色更改答案

【问题标题】：Add Cookies To Input Background Color Change添加 Cookie 以输入背景颜色更改
【发布时间】：2013-12-07 23:57:46
【问题描述】：

我为我的网站添加了背景颜色变化效果。现在我希望该更改适用于我的所有其他页面。我在理解 cookie 函数时遇到了困难，所以我正在研究的一些上下文确实会有所帮助。

我的JS：
function background(color){document.body.style.backgroundColor=color;}

我的 HTML：
<tr><td class="bggreen" style="cursor: pointer" onclick="background('green')">&nbsp;</td></tr>

我的 CSS：
.bggreen { background-color: green; }

代码一切正常，因此其中一些信息可能毫无意义。只是，如果我要构建一个 cookie 以使这些颜色更改适用于我网站中的所有相关页面，我会怎么做？不偏好使用 PHP 还是 JS。我只想要最实用的东西。

【问题讨论】：

标签： javascript html css cookies

【解决方案1】：

以下是我在 javascript 中使用的一些简单的 cookie 函数。您可以在 cookie 中存储最新的颜色值，然后在页面初始化时，您可以从 cookie 中读取值并适当地设置颜色：

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

name 和 value 是字符串。 days 是距离 cookie 过期的天数。

所以，每当你改变颜色时，你都可以这样做：

function background(color){
    document.body.style.backgroundColor = color;
    createCookie("backgroundColor", color, 365);
}

而且，当页面首次加载时，您可以这样做：

var color = readCookie("backgroundColor");
if (color) {
    document.body.style.backgroundColor = color;
}

【讨论】：