1

我希望用户可以选择更改我网站上的背景图片，所以我找到了一些允许他们这样做的代码。它允许他们将他们选择的图像的 URL 粘贴到文本框（输入）中：

<script type="text/javascript">
function changebackground(){
    var url = document.getElementById('bgchanger').value;
    document.getElementsByTagName('body')[0].style.backgroundImage = "url('" + url + "')";
}
</script>

<input type="text" id="bgchanger" placeholder="Change Background Add URL" />
<input type="button" onclick="changebackground();" value="Change!" />

一切正常，但是当用户离开网站或点击刷新时，背景图像会变回白色（默认）

我想知道我们是否可以在用户下次访问该站点时保存用户背景图像。

我做了一个演示：

演示：http: //goo.gl/253IN

用户名：demo

密码：demo1

先感谢您！

PS我不是HTML和Javascrpit方面的专家（还：D），所以我无法理解真正复杂的代码

4

3 回答 3

1

要做到这一点..您必须在用户计算机上放置一个 cookie，然后检查 cookie 是否已设置并检索它的值，...

这是一个用于 cookie 的 jquery 插件 https://github.com/carhartl/jquery-cookie

首先你创建 cookie

$.cookie('background_image', url , { expires: 7 });// will expire in 7 days

然后您检查是否设置了该cookie

if(typeof($.cookie('background_image')) != 'undefined'){
    var users_old_back_ground = $.cookie('background_image');
    $('body').css ({ "background-image" : "url('" + users_old_back_ground + "')"}); //jquery : selecting the body tag ... then using css() to set the bg
}else{
    // do something else because the user doesnt have the cookie 
}

并尝试增强您以前的代码并使用 jquery 而不是普通的 javascript

于 2013-03-02T16:51:05.787 回答
0

一个很好的方法是使用 localStorage。我写了一个 jQuery Plugin 来使它更容易处理。看看这些例子。https://github.com/yckart/jquery.storage.js

于 2013-03-02T16:49:59.143 回答
0

尝试使用 localStorage

    var defaultImage = "http://...";
    document.getElementsByTagName('body')[0].style.backgroundImage = localStorage.getItem('back') ? "url('"+localStorage.getItem('back')+"')" : "url('"+defaultImage+"')";
  function changebackground(){
      var url =  document.getElementById('bgchanger').value;
      document.getElementsByTagName('body')[0].style.backgroundImage = "url('" + url + "')";
      localStorage.setItem('back',url);
    }
于 2013-03-02T16:54:58.747 回答