无法在标签页中看到本地存储事件 [英] Can'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 可以在存储上工作：
-
您必须使用网络服务器访问该页面（
http： // abcd /或http：// domain）
you MUST access the page using web-server (
http://a.b.c.d/orhttp://domain)
- 直接访问（使用
文件：///或c：\file.html将不是工作。
（chrome，ie忽略它，firefox和safari可以运行它）。
- Direct access (using
file:///orc:\file.htmlwill not work.
(chrome and ie ignore it, firefox and safari can run it anyway).
我会考虑删除第三个，它与您的 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>
这篇关于无法在标签页中看到本地存储事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
