Question

我正在开发一个可以通过标签进行通信的聊天应用程序，所以我正在使用localStorage。好的，要重现这个问题：

打开此网址两次，因此您打开了2个标签页。 https://preview.c9users.io/gorgamite/socket/science.html?_c9_id=livepreview0&_c9_host=https://ide.c9.io
在提示框中输入任何内容，您将在另一个标签中看到它。发生的事情是将其设置为localstorage值，并且当您在提示中输入内容时会运行存储事件。
打开新标签页，然后运行以下代码：localStorage.setItem("Test", "Hello");

当您通过控制台执行此操作时，存储事件不会触发。它只适用于网站中javascript的一部分。我怎么能改变这个？当您通过控制台修改localStorage值时，为什么存储事件不会消失？

以下是该网站的代码：

<!DOCTYPE HTML>
<head>
<meta charset="UTF-8">
</head>
<body>
<h1 id = "thing"></h1>
<script>
localStorage.setItem("Test", prompt("Localstorage value:"));
window.onstorage = function(e){
alert(e.newValue); console.log(e);
document.getElementById("thing").innerHTML += e.newValue;
 };
  </script>
 </body>
 </html>

Answer 1

代码中的javascript似乎按设计工作，至少在Chrome中是这样。我猜你已经尝试过了，但是可以肯定的是，我在一个标签的控制台中粘贴了以下内容：

localStorage.setItem("Test", prompt("Localstorage value:"));
  window.onstorage = function(e){
  alert(e.newValue); console.log(e);
  document.getElementById("thing").innerHTML += e.newValue;
};

并在另一个标签中验证了测试：

localStorage.setItem("Test", "Hello");

您可能需要检查浏览器设置中是否启用了localStorage。您可以通过导航到chrome://settings/content在Chrome中执行此操作，然后确保选中“允许设置本地数据”。可能还想尝试清除缓存和cookie。

希望这有帮助。

Answer 2

[编辑]

发布的代码使用提示。这是一个阻止电话。在设置存储之前，代码不会添加storage事件处理程序。因此，在页面加载期间提示的提示被取消之前，通过对storage events的响应，打开的选项卡中不会发生任何事情。

第一次关闭提示框时，它仅在该选项卡中添加storage事件处理程序（称之为“选项卡1”）。现在，如果您在另一个打开的选项卡中输入一个值（称之为“选项卡2”），则会在“选项卡1”中的处理程序通知更新并更新“选项卡1”中的标题。

在两个已打开的标签中首次取消提示后，您可以

重新加载任一选项卡，在提示符处输入值，然后按确定。重新加载的选项卡中没有任何操作（仅部分原因是重新加载后没有onstorage处理程序）。但是其他选项卡已通知更新并运行其storage事件处理程序，该处理程序使用新值进行警报。
在同一个域的任一选项卡中打开控制台，键入并输入

localStorage.setItem("Test", prompt("Localstorage value:"));

并回复提示。同样，storage事件处理程序不会在打开的选项卡中调用，而是在另一个选项卡中调用。

在另一个不是来自同一域的选项卡中打开控制台，粘贴一些代码以设置本地存储并将其报告回来。警告：如果可行，则可能会破坏所使用域的本地存储。或者接受我的说法：测试标签“tab1”和“tab2”不受影响。

<强>为什么

当有权访问的存储区域在另一个文档的上下文中更改时，会向窗口发送StorageEvent。 （MDN的StorageEvent）

要访问同一存储，您打开控制台以设置本地存储的页面必须是from the same origin and use the same protocol作为您希望收到更改通知的页面。要收到通知，storage事件必须在其他文档的上下文中触发 - 即在不同的页面上。

我在通过控制台运行时没有触发localStorage事件

2 个答案: