사이트의 모든 페이지에서 사용자가 선택한 배경을 유지하십시오.

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> 

문제입니다 디폴트 값. 쿠키를 설정하여 처리 할 수 ​​있음을 알고 있습니다. 몇 가지 방법을 시도했지만 아무도 효과가 없었습니다.

누군가 나를 도와주세요. 감사합니다.

Answer 1

의 로컬 스토리지의 배경을 저장

<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

쿠키의 배경 변수를 저장 :에서 가져온

$(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() 방법 :

document.cookie = "bgimage=" + background; 

다음 쿠키를 얻을 Get cookie by name 선택

Answer 3

당신은 당신이 실제로 쿠키를 사용하여 시도 적이 맞춤 background.js 귀하의 웹 사이트

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