Javascript 在站点上的所有页面中保留用户选择的背景

我需要一些帮助。 我为页面制作了一个背景选择器，因此基本上有4个不同的背景图像供用户选择

以下是我用于此目的的代码和脚本：

HTML:

脚本：

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

$（'ul li'）。单击（函数（）{
var background=$（this.css（'background-image'）；
$（“html，body”）.css（“背景图像”，背景）；
});

问题是当我切换页面时，背景图像重置为默认图像。 我知道这可以通过设置cookies来处理。我尝试了几种方法，但都不管用

有人能帮我解决这个问题吗。

---

非常感谢。将背景变量保存在cookie中：

document.cookie = "bgimage=" + background;

然后获取cookie：

$(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（）

方法取自：

将背景变量保存在cookie中：

document.cookie = "bgimage=" + background;

然后获取cookie：

$(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（）

方法取自：

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

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

---

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

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

---

您可以将custom-background.js插件添加到您的网站

---

您可以将custom-background.js插件添加到您的网站

---

你真的尝试过使用cookies吗？你真的尝试过使用cookies吗？这对主页有效，但当我添加子页面（在子文件夹中）时，它就搞砸了。也根本不在歌剧院工作。但是谢谢你的帖子。这对主页有效，但当我添加子页面（在子文件夹中）时，它就搞砸了。也根本不在歌剧院工作。但是谢谢你的帖子。我最终使用了这个代码片段。它适用于所有的主页面和子页面。也适用于我测试的所有浏览器。非常感谢你的帮助！我最终使用了这个代码片段。它适用于所有的主页面和子页面。也适用于我测试的所有浏览器。非常感谢你的帮助！