Question

我希望用户可以选择更改我网站上的背景图片，所以我找到了一些允许他们这样做的代码。它允许他们在文本框（输入）中粘贴他们选择的图像的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!" />

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

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

我做了一个演示：

DEMO ：http://goo.gl/253IN

用户名：演示

密码： demo1

提前谢谢！

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

Answer 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

Answer 2

执行此操作的好方法是使用localStorage。我编写了一个jQuery插件，以便更轻松地处理它。看看这些例子。 https://github.com/yckart/jquery.storage.js

Answer 3

尝试使用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);
    }

允许用户在HTML中更改和保存网页上的背景图像

3 个答案: