gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 19:10:49 24 4
gpt4 key购买 nike

我正在尝试创建一个简单的概念验证,内容是关于在发生更改时使用 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com