localStorage概念的误解

Question

我在这里使用 Sasi Varunan 发布的代码

<script type="text/javascript">
        // Broad cast that your're opening a page.
        localStorage.openpages = Date.now();

        var onLocalStorageEvent = function(e){
            if(e.key == "openpages"){
                // Listen if anybody else opening the same page!
                localStorage.page_available = Date.now();
            }
            if(e.key == "page_available"){
                alert("One more page already open");
            }
        };
        window.addEventListener('storage', onLocalStorageEvent, false);
</script>

代码就像魅力一样工作- 完全按照我想要的方式工作 - 检测应用程序是否已经在另一个选项卡浏览器甚至另一个浏览器窗口中打开。

据我了解：

第一次启动应用程序时，会发生以下情况：

1. 应用程序设置openpages键值Date.now()。
2. 因为1.存储事件监听器启动onLocalStorageEvent事件。
3. 因为密钥存在，所以用 Date.now()openpages设置密钥page_available
4. 当以下应用程序启动时，它们会page_available在存储中找到密钥（第二个如果），则会触发警报，我可以将它们重定向到错误页面。

问题：

如果我关闭所有浏览器窗口并在新窗口中重新启动应用程序，一切仍然正常。

这是我不明白的，因为page_available密钥是持久的，仍然存在于存储中（没有人删除），应用程序应该继续第二个，如果并且警报......但这没有发生。

Answer 1

第一次启动应用程序时，会发生以下情况：

1. 应用程序设置openpages键值Date.now()。
2. 因为1.存储事件监听器启动onLocalStorageEvent事件。
3. 因为密钥存在，所以用 Date.now()openpages设置密钥page_available
4. 当以下应用程序启动时，它们会page_available在存储中找到密钥（第二个如果），则会触发警报，我可以将它们重定向到错误页面。

这里的整个想法是使用storage每次访问时触发的事件在选项卡之间进行通信localStorage。

因此，当页面加载时，它首先访问密钥openpages以触发storage事件e.key == "openpages"。

只有在那之后它才会注册事件侦听器。因此，仅当您在第二个选项卡上加载页面时才会发生 2。在第二个选项卡上，事件被触发并注册事件侦听器。由于storage所有选项卡都会触发该事件，因此正在执行第一个选项卡（已注册）的事件侦听器。

storageTab 1 由事件触发e.key == "openpages"并进入第一个if。它storage通过访问触发事件page_available事件。

此时，选项卡 2 事件侦听器对该storage事件做出反应，但这次使用e.key == "page_available"并进入第二个if显示警报的第二个事件侦听器。

请注意，如果您不关闭选项卡并打开更多选项卡，则选项卡 3 将触发storage所有其他选项卡的事件，并且您将拥有多个带有警报的选项卡。

仅供参考：

如果您想在第一个选项卡而不是第二个选项卡上触发警报，可以使用以下代码来实现：

// Broadcast that you're opening the page.
localStorage.openpage = Date.now();

var onLocalStorageEvent = function(e) {
  if (e.key == "openpage") {
    alert("One more page already open");
  }
};
window.addEventListener('storage', onLocalStorageEvent);

阅读更多有关localStorage 此处的信息。
阅读更多有关addEventListener 此处的信息。