添加cookie功能到换色器

时间:2014-02-26 18:05:34

标签: javascript jquery css cookies background-color

我已经通过jQuery创建了一个颜色转换器,但是无法创建一个cookie函数,所以会记住颜色偏好。 这是代码;

<body> 
<button id="grey">Grey</button>
<button id="red">Red</button>
<button id="pink">Pink</button>
<button id="blue">Blue</button>
<button id="green">Green</button>
<button id="yellow">Yellow</button>
<button id="orange">Orange</button> 
</body>

这是使用的jQuery:

$(document).ready(function() {
 $("button#grey").click(function(){ $("body").css("background","#111") }) 
 $("button#red").click(function(){ $("body").css("background","red") }) 
 $("button#pink").click(function(){ $("body").css("background","pink") }) 
 $("button#blue").click(function(){ $("body").css("background","blue") }) 
 $("button#green").click(function(){ $("body").css("background","green") }) 
 $("button#yellow").click(function(){ $("body").css("background","yellow") }) 
 $("button#orange").click(function(){ $("body").css("background","orange") }) });

这是小提琴:JsFiddle
帮助表示赞赏:)
谢谢

1 个答案:

答案 0 :(得分:1)

有一个非常简单的jquery插件,可以帮助设置/获取cookie值。

https://github.com/carhartl/jquery-cookie

您可以像这样使用它:

$("button#grey").click(function() {
   $("body").css("background", "#111")
   $.cookie("bg-color", "#111")
}

然后当你的页面加载

$(document).read(function() {
  $("body").css("background", $.cookie("bg-color"));
});

确保首先检查是否已设置bg颜色值!