添加Cookie以输入背景颜色变化

时间:2013-11-22 23:03:35

标签: javascript html css cookies

我在网站上添加了背景颜色更改效果。现在我希望该更改适用于我的所有其他页面。我无法理解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。我想要最实际的东西。

1 个答案:

答案 0 :(得分: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);
}

namevalue是字符串。 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;
}