javascript - 误解localStorage的概念

问题描述

<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>

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

据我了解：

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

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

问题：

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

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

标签： javascriptlocal-storage

解决方案

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

具有值的应用程序集openpages键。Date.now()

因为 1. 存储事件监听器启动onLocalStorageEvent事件。

因为key存在，所以用Date.now()openpages设置keypage_available

当以下应用程序启动时，它们会page_available在存储中找到密钥（第二个 if），警报被触发，我可以将它们重定向到错误页面。

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

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

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

Tab 1 由storage事件触发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 这里。

javascript - 误解localStorage的概念

问题描述

解决方案

推荐阅读