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

我希望用户可以选择在我的网站上更改背景图片，所以我找到了一些允许他们执行此操作的代码。这使他们能粘贴在一个文本框他们选择的图像的URL（输入）：允许用户在HTML网页上更改和保存背景图片

<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），所以我将无法理解真正复杂的代码

来源

2013-03-02 Giovanni

店在cookie中的设置。 – 2013-03-02 16:43:52

或localStorage – 2013-03-02 16:44:17

的jQuery的，而不是用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-02 16:54:58 Sam

谢谢你的帮助：D它的工作原理 – Giovanni 2013-03-02 16:59:08

一个好办法做到这一点是使用localStorage的。我已经写了一个jQuery插件来处理它更容易。看看例子。 https://github.com/yckart/jquery.storage.js

来源

2013-03-02 16:49:59 yckart

'您可以选择包含一个$ .cookie插件以支持旧浏览器（eq IE lt 7）'..所以它不支持所有浏览器.. – 2013-03-02 16:52:42

@GioL我认为使用cookie不再需要：http：//caniuse.com/#search=localstorage – yckart 2013-03-02 18:41:30

做到这一点..你必须把用户计算机上的cookie，然后检查是否设置cookie和检索它的价值，......

这里是饼干 https://github.com/carhartl/jquery-cookie

一个jQuery插件

首先你创造的饼干

$.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 
}

，并尝试提升你以前的代码，并使用普通的JavaScript

来源

2013-03-02 16:51:05

感谢您的帮助：D – Giovanni 2013-03-02 17:03:59

您不止欢迎..尝试学习jQuery，它非常简单而强大。 :)祝你好运 – 2013-03-02 17:05:32

@codeiz尝试学习的JavaScript，这很容易，也许让你让jQuery更强大;） – yckart 2013-03-02 17:38:24

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

回答

相关问题