Question

我正在尝试制作一个东西，在一个选项卡中键入内容，然后在另一个选项卡中弹出。但是，我必须不断重新加载页面才能获得我的下一条消息。首先，这是我尝试过的。

<!DOCTYPE html>
<html>
<body>
    <p id="message"></p>
    <script>
        var x = localStorage.getItem('message')
        var i;
        for (i = 0; i < 5) {
            document.getElementById('message').innerHTML = x;
        }
    </script>
</body>
</html>

但是，这会将页面置于恒定的重新加载状态。我该怎么做？谢谢！

Answer 1

使用setInterval而不是循环。

setInterval(function() {
    var x = localStorage.getItem('message');
    document.getElementById('message').innerHTML = x;
}, 1000);

这将每秒更新一次。

Answer 2

您可以设置事件侦听器来捕获发送的每条消息，而不是不断轮询更新。感谢storage event：

ListenHTTP

Answer 3

您有一个无限循环。 for循环包含四个步骤。

初始化：声明变量及其初始值（发生一次）
条件：检查条件以继续循环
最终
表达：通常在您处理将结束您的逻辑的地方像增加i变量一样循环
执行：执行代码块中的代码

您的方法有效，但是它永远不会停止工作，因此为什么您的浏览器不会停止加载。

无论如何，for循环的移动速度都太快了，最好听文档中的存储事件更新。

var messageContainer = document.querySelector('#message')

window.addEventListener('storage', function() {
var text = localStorage.getItem('message')
messageContainer.textContent = text
}

有没有办法不断更新变量？

3 个答案: