我正在尝试创建一个简单的概念验证，涉及在发生更改时使用 localStorage 在我的应用程序中触发选项卡。根据我看过的其他文章，我知道这是可能的。我明白the spec声明该事件将在每个页面上触发except我现在使用的那个 - 这实际上就是我想要的。但是，我似乎无法让这个简单的演示真正发挥作用。
我获取了下面的代码，并打开了它的多个选项卡。使用我的 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.addEventListener致力于storage:
-
you MUST使用网络服务器访问页面（http://a.b.c.d/ or http://domain)
- 直接访问（使用
file:/// or c:\file.html will not work.
（chrome和ie忽略它，firefox和safari无论如何都可以运行它）。
我会考虑删除第三个，它与你的元素无关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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
