误解localStorage的概念

Question

我正在使用由 Sasi Varunan here 发布的这段代码

<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. 因为openpages键存在，所以用Date.now()设置page_available键
4. 当以下应用启动时，它们会在存储中找到 page_available 键（第二个 if），警报被触发，我可以将它们重定向到错误页面。

问题：

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

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

Answer 1

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

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

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

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

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

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

此时选项卡 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);

---

阅读更多关于localStoragehere的信息。
阅读更多关于addEventListenerhere的信息。

Answer 2

重新启动浏览器窗口后一切正常，并且 我不明白为什么，因为 page_available 键仍然存在 在仓库里

这是因为 localStorage 没有与 sessionStorage 相反的到期日期。 sessionStorage 会在浏览器关闭后被清除，但 localStorage 仍然存在。

您仍然可以通过清除浏览器缓存和 cookie 来清除 localStorage

另外这个 sn-p localStorage.openpages = Date.now(); 似乎不正确。

如果要在 localStorage 中设置值，请这样做

localStorage.setItem('openpages',Date.now());