在网站上的所有页面中保持用户选择的背景。

Question

需要帮助。我为一个页面做了一个背景选择器，所以基本上有4种不同的背景图像，用户可以从中选择。

下面是我为此使用的代码和脚本：

HTML：

<ul>
  <li id="color-1"></li>
  <li id="color-2"></li>
  <li id="color-3"></li>
  <li id="color-4"></li>
</ul>

剧本：

<script>
    $('ul li').click(function() {
    var background = $(this).css('background-image');
    $("html, body").css("background-image", background);
});
</script>

问题是当我将页面背景图像重置为默认图像时。我知道这可以通过设置cookie来解决。我尝试了几种方法，但都没有用。

有人能帮我解决这个问题吗。谢谢你占优势。

Answer 1

选中后，将背景存储在localStorage中

<script>
    $('ul li').click(function() {
    var background = $(this).css('background-image');
    $("html, body").css("background-image", background);
    localStorage.background = background;
});
</script>

加载页面时，应用它。

$("html, body").css("background-image", localStorage.background);

Answer 2

将后台变量保存在cookie中：

document.cookie = "bgimage=" + background;

那就拿饼干来：

$(function(){
   var bgCookie = getCookie("bgimage");
   $("html, body").css("background-image", bgCookie);
});

function getCookie(name) {
  var parts = document.cookie.split(name + "=");
  if (parts.length == 2) return parts.pop().split(";").shift();
}

getCookie()方法取自：Get cookie by name

Answer 3

您可以向您的网站添加自定义背景. to插件。

https://github.com/CybrSys/custom-background.js