我正在尝试创建一个简单的概念验证,内容是关于在发生更改时使用 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.addEventListener
在 storage
上工作:
您必须使用网络服务器(
http://a.b.c.d/
或http://domain
)访问页面- 直接访问(使用
file:///
或c:\file.html
将不工作。
(chrome 和 ie 忽略它,firefox 和 safari 无论如何都可以运行它)。
- 直接访问(使用
我也会考虑删除第 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/