Question

我试图创建一个简单的概念验证，关于在发生更改时使用localStorage触发应用程序中的选项卡。我知道这可以基于我见过的其他文章。我理解the spec声明事件会在页面上触发，除了我所在的那个 - 这实际上就是我想要的。但是，我似乎无法让这个简单的演示实际工作。

我已经使用了下面的代码，并打开了它的多个标签。使用我的Chrome开发工具，我可以在控制台中检查＆gt; localStorage，并查看＆＃34;添加＆＃34;之前和之后的值。和＆＃34;清除＆＃34;按下按钮 - 它们实际上在将键值对存储和清除到本地存储中时起作用，但事件不会触发警报。

我甚至在每个标签的Chrome开发工具中的javascript中放置了断点，但我似乎永远无法获得＆＃34; onStorageEvent＆＃34;在打开的任何标签中点击的功能。

我做错了什么？

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Tab1</title>
</head>

<body>
  <button id="add" onclick="localStorage.setItem('tab','changed')">Add</button>
  <button id="clear" onclick="localStorage.clear()">Clear</button>
  <script type="text/javascript">
    function onStorageEvent() {
      alert("storage event: " + localStorage.getItem("tab"));
    }

    window.addEventListener('storage', onStorageEvent, false);
  </script>
</body>

</html>

＆＃13;

Answer 1

要使window.addEventListener能够使用storage：

您必须使用网络服务器（http://a.b.c.d/或http://domain）
访问该网页
- 直接访问（使用file:///或c:\file.html将不工作。
  （chrome，即忽略它，firefox和safari无论如何都可以运行它。）
我会考虑删除第3个，它与DOM树中的元素无关，并且可能会导致麻烦（让浏览器拥有它的默认值）。

此代码已在Chrome 52，Firefox 47 + 48，IE 11，Safari 5.7.1

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <title>Tab1</title>
</head>

<body>
  <button id="add" onclick="localStorage.setItem('tab','changed')">Add</button>
  <button id="clear" onclick="localStorage.clear()">Clear</button>
  <script type="text/javascript">
    function onStorageEvent() {
      alert("storage event: " + localStorage.getItem("tab"));
    }

    window.addEventListener('storage', onStorageEvent);
  </script>
</body>

</html>

＆＃13;

无法在标签

1 个答案: