javascript - 如何通过单击第 1 页中的按钮更改第 2 页中 html 的颜色

Question

**page1.html**

     <button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  document.querySelector(".example").style.backgroundColor = "red";
}
</script>

**page2.html**

<h2 class="example">A heading with class="example"</h2>

类名为example的h2标签在点击第1页的按钮后背景色不变。

Answer 1

一个可能的解决方案是使用本地存储，它在同一域的页面上持久化。然后在目标页面读取“onload”中的值。

在第 1 页:

function myFunction() {
    localStorage.setItem("exampleBGColor", "red");
}

在第 2 页:

window.onload = function() {
    let BGcolor = localStorage.getItem("exampleBGColor");
    if(BGcolor) {
        document.querySelector(".example").style.backgroundColor = BGcolor;
        localStorage.removeItem("exampleBGColor");
    }
}

希望对您有所帮助。