Как сохранить функцию onclick после обновления страницы - PullRequest
Новая
       52

Как сохранить функцию onclick после обновления страницы

0 голосов
/ 30 апреля 2019

Я новичок в javascript и пытаюсь написать код, в котором две разные кнопки дают странице два разных стиля, так что вы можете выбрать один дизайн в начале, и сайт останется таким. Как сделать так, чтобы дизайн оставался таким же после обновления сайта или перехода на другую страницу на том же сайте?

Я пробовал sessionStorage и localStorage, но не могу заставить его работать.

Это то, что я имею до сих пор: 

function greenButton() {
 document.getElementById("container").style.backgroundColor = "white";
  document.body.style.backgroundColor = "green";
}
 function redButton() {
  document.getElementById("container").style.backgroundColor = "black";
  document.body.style.backgroundColor = "red";
}

и HTML: 

<div class="green" onclick="greenButton()>green</div>
<div class="red" onclick="redButton()>red</div>

<div class="container">Content</div>

Что мне нужно изменить / добавить, чтобы выбранный дизайн был активным даже после обновления / переключения страниц?

1 Ответ

1 голос
/ 30 апреля 2019

Поскольку вы новичок в javascript, я использую для вас чистый javascript здесь

создайте новую функцию и вызовите ее при загрузке страницы, например 

<body onload="checkthelastColor()">
    <div class="green" onclick="greenButton()>green</div>
    <div class="red" onclick="redButton()>red</div>
    <div class="container">Content</div>
</body>

Вот функция 

function checkthelastColor(){
    var color = localStorage.getItem("selectedColor")
    if(color == "red"){
        redButton()
    }else{
        greenButton()
    }
}

В старых функциях сохраняйте цвет в localStorage, например 

function greenButton() {
    document.getElementById("container").style.backgroundColor = "white";
    document.body.style.backgroundColor = "green";
    localStorage.setItem("selectedColor","green");
}
function redButton() {
    document.getElementById("container").style.backgroundColor = "black";
    document.body.style.backgroundColor = "red";
    localStorage.setItem("selectedColor","red");
}
...