Javascript 如何设置cookie onclick以更改背景

我尝试更改div onclick的背景并用cookie保存它。这是我的密码。首先，我不知道我的cookie是否已设置，其次，我是否可以使用cookie的值更改背景

有人能帮我想出一个主意吗

<div class="container">


<div class="col-md-6">

<div class="one"><a id="1" onClick="addcookie()" href="#">Fisrt Link</a></div>

</div>



<div class="col-md-6">

<div class="two"><a id="2" onClick="addcookie()" href="#">Second Link</a></div>

</div>




</div>
<script src=js/jquery-1.11.1.js></script>
<script src="js/jquery.cookie.js"></script>

<script>

var cookieName = 'cookie1';
function addcookie(){



    var date = new Date();
    var minutes = 5;
    date.setTime(date.getTime() + (minutes * 60 * 1000));

    var idi = getDocumentById(this.id);

    var cookieValue = "http://path to image/image"+idi+".png";

    $.cookie(cookieName, cookieValue, { expires: date });

    $('.one').css('background', $.cookie('cookieName'));

}

</script>



<script src=js/bootstrap.js></script>
</body>

var cookieName='cookie1'；
函数addcookie（）{
变量日期=新日期（）；
var分钟=5；
date.setTime（date.getTime（）+（分钟*60*1000））；
var idi=getDocumentById（this.id）；
var cookieValue=”http://path 至图像/图像“+idi+”.png”；
$.cookie（cookieName，cookieValue，{expires:date}）；
$（'.one'）.css（'background'，$.cookie（'cookieName'）；
}

除了@George在评论中指出的内容（用

document.getElementById（）

替换

getDocumentById（）

-不存在的本机函数），您还必须确保添加的图像URL编码正确，而不是操作系统

$('.one').css('background', $.cookie('cookieName'));

…这样做

$('.one').css('background', 'url("' + $.cookie(cookieName) + '")');

这是正确的CSS语法，包括背景URL的不是

背景：http://path 到image/image.png

……但是

background:url("http://path to image/image.png");

…因为如果要将变量用作函数的参数，则必须省略其周围的引号，即

$。cookie（'cookieName'）

变为

$。cookie（cookieName）

此外，

this.id

仅在将

this

作为内联函数的参数传递时返回元素的id，如下所示：

onClick="addcookie(this)"

$(document).ready(function() {
    $('.container div a').each(function(){
        if ($.cookie(this.id))
            $(this).css('background', 'url("' + $.cookie(this.id) + '") no-repeat');
    });
});

…然后在函数中引用相同的值，如下所示：

function addcookie(that) 

var idi = that.id;

…并像这样使用它：

function addcookie(that) 

var idi = that.id;

下面是一个JSFIDLE，您可以在其中尝试：

编辑：只要稍加修改（删除

一个

和

两个

分类div，并在背景中添加

无重复

），您就有了一个简洁的方法，可以始终只将背景添加到所讨论的元素中，假设它是您真正想要实现的：

编辑#2：如果cookie已经存在，则要加载图像，请创建另一个函数，在文档准备就绪时启动，通过链接并根据现有cookie检查它们，如下所示：

onClick="addcookie(this)"

$(document).ready(function() {
    $('.container div a').each(function(){
        if ($.cookie(this.id))
            $(this).css('background', 'url("' + $.cookie(this.id) + '") no-repeat');
    });
});

---

我相应地更新了上面的小提琴。首先单击链接，然后再次运行脚本，您将看到链接将保留其背景：

没有本机的

getDocumentById（）

函数，可能您指的是

document.getElementById（）

method？一条建议：使用浏览器的开发工具查看正在设置的cookies：右键单击>检查元素>资源>cookies（在大多数情况下，Chrome是肯定的）您是否试图为两个div保存一个cookie…？您可能想使用

localStorage

而不是cookies来执行类似的操作。少一点干扰，只做这项工作fine@George谢谢你的更正！我不知道我在想什么！：-）此外，

此

将设置为

窗口

。。。要么建议在内联处理程序中传递引用，要么最好建议单独绑定它..更新代码，因为我想更改div的背景，我使用了$（'#c'+idi）.css，它可以工作！Β但是当背景发生变化时，尽管我在>资源>Cookies中看到cookie，但通过刷新页面，背景会恢复到原始状态。这是什么意思？饼干坏了？