使用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 中获取一个输入字段并将该文本存储在 localstorage 中，然后在另一页中显示它。

<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>