javascript - 无法跨选项卡查看 localstorage 事件

标签 javascript events tabs local-storage

我正在尝试创建一个简单的概念验证,内容是关于在发生更改时使用 localStorage 触发我的应用程序中的选项卡。根据我看过的其他文章,我知道这是可能的。我明白the spec声明该事件将在所有页面上触发, 我所在的页面除外 - 这实际上是我想要的。但是,我似乎无法让这个简单的演示真正起作用。

我已经获取了下面的代码,并打开了它的多个选项卡。使用我的 Chrome 开发工具,我可以在控制台中检查 >localStorage 并查看按下“添加”和“清除”按钮之前和之后的值——它们实际上在将键值对存储和清除到本地时按需要运行存储,但事件未触发警报。

我什至在每个选项卡的 Chrome 开发工具中的 javascript 中放置了断点,但我似乎永远无法在任何打开的选项卡中点击“onStorageEvent”函数。

我做错了什么?

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

最佳答案

为了让 window.addEventListenerstorage 上工作:

  1. 必须使用网络服务器(http://a.b.c.d/http://domain)访问页面

    • 直接访问(使用 file:///c:\file.html工作。
      (chrome 和 ie 忽略它,firefox 和 safari 无论如何都可以运行它)。
  2. 我也会考虑删除第 3 个,它与您的 DOM 树中的元素无关,并且它可能会引起麻烦(让浏览器拥有它的默认值)。

此代码已在 Chrome 52、Firefox 47+48、IE 11、Safari 5.7.1 中测试

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

关于javascript - 无法跨选项卡查看 localstorage 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38962045/

相关文章:

javascript - Bootstrap 选项卡 : Go to Specific Tab on different page in Wordpress

macos - 在 Mac 终端应用程序中 move 选项卡的快捷方式?

javascript - 正则表达式 在分号之前添加 !important (如果不存在)

java - 在 Java 中实现拖放界面

javascript - 当我将它插入网站时,为什么这个 slider 不起作用?

javascript - JQuery 事件绑定(bind)被覆盖

events - 使用fabric8 API在kubernetes集群上建立events()监视的结果是JsonMappingException:找不到kind:Event的资源类型

jquery - 如果选项卡的宽度超过页面隐藏额外的选项卡

javascript - 如何仅显示 3 秒的 div,然后使用 jquery 再次消失?

隐藏输入元素的 Javascript 和 defaultValue