При нажатии на кнопку изменяется фон

Question

Прошу помогите, второй день мучаюсь мне нужно сделать так что бы на сайте менялся фон, при этом не на одной странице а на всех, я плохо разбираюсь в коде.

Вот что имеется:

<script>
var colorArray = [ "#000", "#fff", "#eee" ]; // массив с цветами
var i = 0; // итератор

function changeColor(){
    document.body.style.background = colorArray[i]; 
    i++;
    if( i > colorArray.length - 1){
        i = 0;
    }
}

</script>
<input type="button" onclick="javascript:changeColor();"/>

С помощью этого кода меняется фон на одной странице, а еще не могу сделать так что бы это была красивая кнопка по типу переключения.

Подскажите как можно реализовать изменение фона ни на одной странице, а на всех?

Answer 1

Для решения этой задачи можно использовать localStorage или sessionStorage Разница между localStorage и sessionStorage заключается в том, каким образом хранятся данные. В случае использования sessionStorage данные хранятся только в рамках сессии, а к данным в localStorage доступ будет и после того, как браузер был закрыт и запущен заново.

Примеры использования localStorage и sessionStorage

Для того, чтобы добавить информацию о цвете в localStorage, можно модифицировать ваш код так:

<script>
var colorArray = [ "#000", "#fff", "#eee" ]; // массив с цветами
var i = 0; // итератор

function changeColor() {
    var currentColor = colorArray[i];
    document.body.style.background = currentColor;
    localStorage.setItem('backgroundColor', currentColor);
    i++;
    if( i > colorArray.length - 1){
        i = 0;
    }
}

</script>
<input type="button" onclick="javascript:changeColor();"/>

Чтобы при загрузке страницы установить цвет фона из хранилища:

<script>
  window.onload = function() {
    document.body.style.background = localStorage.getItem('backgroundColor');
  };
</script>

Разумеется, надо предусмотреть ситуацию, когда цвет был не задан.

БЛОГ НА HUSL

При нажатии на кнопку изменяется фон

Ответы (1 шт):