使用JS从另一个页面更改主页上div元素的内容

Question

(main.html)

<div>

    Any Text Here

</div>

(page2.html)

<button class="home" onclick="change()">Home</button>

(page2.js)

function change()

{

  //From here, how can I change div content on main.html   

}

我希望当我单击此按钮时，应该更改 main.html 上的内容。我也尝试过使用 localStorage 但对我没有用...请回答这个问题帮助我！！

Answer 1

(main.html)<div id="content">&nbsp; &nbsp; Any Text Here</div>(main.js)document.addEventListener('DOMContentLoaded', function(){&nbsp; &nbsp;const contentDiv = document.getElementById('content');&nbsp; &nbsp;const data = sessionStorage.getItem('data');&nbsp; &nbsp;if(data){&nbsp; &nbsp; &nbsp; &nbsp;contentDiv.innerHTML = data;&nbsp; &nbsp;}});(page2.html)<button class="home" onclick="change()">Home</button>(page2.js)function change(){&nbsp; sessionStorage.setItem('data', 'some value');}

Answer 2

LocalStorage 将值永久存储在客户端。因此，当您单击按钮时，它将永远改变值。下次打开浏览器时，您将看到更改后的值。因此，要在每次单击时进行更改，您必须手动将“hello”替换为您希望在单击按钮时看到的文本如果您不想每次都更改代码，您可以在 page2.html 中获取一个输入字段并将该文本存储在 localstorage 中，然后在另一页中显示它。<div id="page1">&nbsp; &nbsp; Any Text Here&nbsp; &nbsp;&nbsp;</div><script>&nbsp; &nbsp; document.getElementById("page1").innerHTML=localStorage.getItem("page2");</script><button id="home" class="home" onclick="change();">Home</button><script>function change(){&nbsp; //From here, how can I change div content on main.html&nbsp;&nbsp;&nbsp;x="hello";&nbsp;localStorage.setItem("page2", x);}</script>