Сохраните выбранный пользователем фон на всех страницах сайта

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

При выборе сохранения фона в 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

Сохранить переменную фона в куки:

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

вы можете добавить пользовательские-background.js плагин для вашего сайта

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