Question

我正在寻找将cookie放入此脚本的帮助，以便浏览器记住浏览器关闭或更改页面时选择的背景图像。任何帮助将不胜感激！

＆＃13;

function changeTheme()
{

  var e = document.getElementById("themes");
  var theme = e.options[e.selectedIndex].value;
  console.log(theme);
  document.getElementById("shelf").style.backgroundImage = "url("+theme+")";

}

＆＃13;

<body id="shelf">
<select id="themes" onChange="changeTheme()" name="ChangeBG">
  <option value="images/background1.jpg" selected="selected">Default</option>
  <option value="images/background2.jpg">Heart</option>
  <option value="images/background3.jpg">Earthly</option>
  <option value="images/background4.jpg">Sunflowers</option>
  <option value="images/background5.jpg">Mountin</option>
</select>

＆＃13;

Answer 1

看起来你唯一缺少的是设置和获取cookie。这是一篇关于使用jquery和javascript的setting and getting cookies的帖子。

这是jquery，但它完成了工作。

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!--download jquery.cookie from here http://plugins.jquery.com/cookie -->
<script type="text/javascript" src="images/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var theme = $.cookie("backgroundImage");
    if (theme){document.getElementById("shelf").style.backgroundImage = "url("+theme+")";}
    $("#themes").change(function() {
        theme = $(this).val();
        $.cookie("backgroundImage", theme);
        document.getElementById("shelf").style.backgroundImage = "url("+theme+")";
    });
});
</script>
</head>
<body id="shelf">
<!--<select id="themes" onChange="changeTheme()" name="ChangeBG">-->
<select id="themes" name="ChangeBG">
  <option value="images/background1.jpg" selected="selected">Default</option>
  <option value="images/background2.jpg">Heart</option>
  <option value="images/background3.jpg">Earthly</option>
  <option value="images/background4.jpg">Sunflowers</option>
  <option value="images/background5.jpg">Mountin</option>
</select>
</body>
</html>

用cookie改变背景图像

1 个答案: