无法跨标签查看本地存储事件-前端问题

Can#39;t see localstorage event across tabs(无法跨标签查看本地存储事件)

本文介绍了无法跨标签查看本地存储事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试创建一个关于使用 localStorage 在发生更改时触发我的应用程序中的选项卡的简单概念验证.根据我看过的其他文章，我知道这是可能的.我了解规范声明该事件将永远触发除了我所在的页面 - 这实际上是我想要的.但是，我似乎无法让这个简单的演示真正发挥作用.

I'm trying to create a simple proof-of-concept regarding the use of localStorage to trigger tabs in my application when changes occur. I know this is possible based on other articles I've seen. I understand the spec states the event will fire on ever page except the one I'm on - this is in fact what I want. However, I can't seem to get this simple demo to actually work.

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

I've taken the code below, and opened up multiple tabs of it. Using my Chrome Dev Tools, I can check >localStorage in the console and see the value before and after the "Add" and "Clear" buttons are pressed - they are in fact functioning as desired in storing and clearing the key value pair into local storage, yet the event isn't firing the alert.

我什至在每个选项卡的 Chrome 开发工具中的 javascript 中放置了断点，但我似乎永远无法在打开的任何选项卡中点击onStorageEvent"功能.

I even placed breakpoints in the javascript in my Chrome Dev Tools of each tab, yet I can never seem to get the "onStorageEvent" function to hit in any tab opened.

我做错了什么?

<!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.addEventListener 在 storage 上工作:

In order for the window.addEventListener to work on storage:

您必须使用网络服务器(http://abcd/ 或 http://domain)访问页面

you MUST access the page using web-server (http://a.b.c.d/ or http://domain)

直接访问(使用 file:/// 或 c:file.html 将不工作.
(chrome和ie忽略它，firefox和safari无论如何都可以运行).

我也会考虑删除第 3 个，它与 DOM 树中的元素无关，并且可能会导致麻烦(让浏览器拥有它的默认值).

I would consider also removing the 3rd, it is not relevant to elements in your DOM tree, and it might cause troubles (let the browser have it's defaults).

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

This code was tested in 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>

这篇关于无法跨标签查看本地存储事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！