使用 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">
    Any Text Here
</div>

(main.js)

document.addEventListener('DOMContentLoaded', function(){
   const contentDiv = document.getElementById('content');
   const data = sessionStorage.getItem('data');
   if(data){
       contentDiv.innerHTML = data;
   }
});

(page2.html)

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

(page2.js)

function change()
{
  sessionStorage.setItem('data', 'some value');
}

Answer 2

LocalStorage 将值永久存储在客户端。 因此，当您单击按钮时，它将永远改变值。 下次打开浏览器时，您将看到更改后的值。 因此，要在每次单击时更改，您必须手动将“hello”替换为您希望在单击按钮时看到的文本

如果您不想每次都更改代码，则可以在 page2.html 中获取一个输入字段并将该文本存储在本地存储中并在另一页中显示。

 <div id="page1"> Any Text Here </div> <script> document.getElementById("page1").innerHTML=localStorage.getItem("page2"); </script>

 <button id="home" class="home" onclick="change();">Home</button> <script> function change() { //From here, how can I change div content on main.html x="hello"; localStorage.setItem("page2", x); } </script>