误解localStorage的概念

Posted 2023-02-16

【中文标题】误解localStorage的概念

【英文标题】：Misunderstanding concept of localStorage

【发布时间】：2018-11-28 15:44:45

【问题描述】：

我正在使用由 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>

代码的工作方式与魅力相似 - 完全按照我的意愿行事 - 检测应用程序是否已在另一个选项卡浏览器或什至在另一个浏览器窗口中打开。

据我了解：

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

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

问题：

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

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

【问题讨论】：

你可以阅读更多关于localstoragehere

【参考方案1】：

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

应用设置openpages键和Date.now()值。 因为1.存储事件监听启动onLocalStorageEvent事件。 因为openpages键存在，所以用Date.now()设置page_available键 当启动以下应用时，它们会在存储中找到 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的信息。

【讨论】：

谢谢先生！这就是我一直在寻找的我不喜欢/想要使用我不理解的代码:)

原来的代码和你的还是有很大区别的。在原始代码中，警报是在第二个（最新窗口）中触发的，而在您的代码中，警报是在第一个（原始）窗口中触发的，至少在我的 Chrome 中......

如果你有一点时间，我很想了解为什么会有这种差异？

好吧，我没注意到。我更新了我的答案。如果您还有其他问题，请告诉我。

我只是想了解为什么在原始代码中警报会在第二个选项卡和您的第一个选项卡中触发。据我了解，在第二种情况下，localStorage.openpages = Date.now(); 事件被触发两次。第二个是 localStorage.page_available = Date.now();感谢您的所有时间和耐心。

【参考方案2】：

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

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

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

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

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

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

【讨论】：

是的，我知道这一点，正是因为 openpages 键在浏览器重新启动后将存在于 localStorage 中，并且应用程序不应启动......但正在启动并正常工作。

我的意思是，如果我关闭所有浏览器窗口并重新启动该应用程序，即使存在 openpages 键，它也会正常工作.....

一旦你发现本地存储中存在密钥，只需删除密钥并重定向它们。

代码超级OK 我不明白为什么它在浏览器重启后工作.....

页面第一次加载事件监听器尚未注册。这就是它不显示警报的原因。