Set/Remove localStorage 项目和 EventListener

Question

我一直在搞乱 localStorage 和 EventListener，如下所示（来自 w3schools，但我在搞乱）。下面总是将“存储区域 3 中发生的更改”打印到 div。我猜这是 JS 的异步特性，我必须做一些像 promise chaining 这样的事情吗？

其次，同样地，当我添加从 localStorage 中删除变量时，因此在 EventListener 中检测到该变量为 null，下面将不会向 div 打印任何内容。我假设它在执行实际打印的第一个事件（设置变量）之前看到了删除。无论如何，有没有办法从 localStorage 中设置和删除变量，或者这就是所有异步的东西和需要的承诺（以前的回调和 setTimeouts）？非常感谢。

<button onclick="changeValue()">Change a Storage Item</button>

<p id="demo"></p>

<script>

    window.addEventListener("storage", myFunction);
    var x;
    var c=0;
    var mtv;
    function myFunction(event) {
      if (event.key==="mytime") {
        mtv=localStorage.getItem("mytime");
          if (mtv===null) {

            } else {
      document.getElementById("demo").innerHTML = "A change was made in the storage area "+ c;
          }
        }
    }

    function changeValue() {
      x = window.open("", "myWindow", "width=200,height=100");
      c=c+1
      x.localStorage.setItem("mytime", "true");
      c=c+1;
      x.localStorage.removeItem("mytime");
      c=c+1;
      x.close();
    }
</script>
</body>
</html>

更新...我不知道如何在响应中格式化代码，但我没有像上面那样立即删除 localStorage object，而是在 add/remove 上进行了切换localStorage 变量...添加或删除应触发祖父母中的 ActionListener 事件 window...

if(localStorage.getItem('mytime')){
      x.localStorage.removeItem("mytime");
}else{
      x.localStorage.setItem("mytime", "true");
}

Answer 1

好的，您可以更轻松地查看发生了什么，方法是使用您的代码创建一个 HTML 并在您的浏览器中打开。然后，在事件中和更新存储的地方放置断点。让我们看看：

点击按钮
打开一个window（没用因为那个window什么都不做）
更新存储（尚未触发事件）
删除存储（尚未触发事件）
关闭window
现在，在这两种情况下，您都会收到 c=3 的 2 个事件

如果您需要跟踪您的 c 值，您可以在存储中保存以下值：

x.localStorage.setItem("mytime", c);

然后，您收到第一个 event.newValue="1" 的事件和第二个 event.newValue=null 和 event.oldValue="1" 的事件。

Set/Remove localStorage 项目和 EventListener

Set/Remove localStorage item and EventListener

javascript

local-storage

event-listener