Question

我正在尝试创建一个页面，该页面可能会受到另一页面的影响（一个页面控制另一页面上发生的事情...）。

我有两个HTML页面和一个名为“ Controll.js”的js文件，并且在Index.html中有一个用于更改“ Indiv”的函数。此事件由Controll.html页面上的按钮触发。我的代码如下：（js是引用的Controll.js文件）

 function myFunction() {
    document.getElementById("Indiv").innerHTML = "Hi!!";
 }

<!-- Controll.html -->

<DOCTYPE! html>
<head>
</head>
<body>


    <button type="button" onclick="myFunction()">write hi</button>

</body>
<script src="Controll.js"></script>
</html>
<!-- END Controll.html -->

<!-- Index.html -->

<DOCTYPE! html>
<head>
  <script src="Controll.js"></script>
</head>
<body>


  <p id="Indiv"></p>

</body>

</html>
<!-- END Index.html -->

Answer 1

您在一页中编写的Javascript代码一旦导航到另一页就消失了，永久保留的是“ localStorage”，您需要做的是从控制器将字符串保存在本地存储中，然后从索引中获取它。

这就是您的函数在Controll.js中的外观：

 function myFunction() {
    localStorage.setItem('message','hi');
 }

然后像在Controll.html中一样在onclick上触发它

<!-- Controll.html -->

<DOCTYPE! html>
<head>
</head>
<body>


    <button type="button" onclick="myFunction()">write hi</button>

</body>
<script src="Controll.js"></script>
</html>
<!-- END Controll.html -->

在index.html中，我们需要检查控制页面是否向我们发送了任何内容，并且默认情况下它是否永久保留，如果您只想发送一次，则可以在获取后将其删除。

index.js

var Indiv = document.getElementById('Indiv');
function fetchMessage(){
 //check if the message exists
 if(localStorage.getItem('message'){
  Indiv.innerHTML = localStorage.getItem('message');
  //optional, empty the localStorage after getting the message
  localStorage.removeItem('message');
 }
}

如何使用javascript

1 个答案: