保持用戶在網站上的所有頁面選擇背景

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：

<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; 

然後得到該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()方法：Get cookie by name

Answer 3

您可以添加自定義插件background.js到您的網站

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