代码之家 › 专栏 › 技术社区 › Radu

误解本地存储的概念

local-storage javascript

Radu · 技术社区 · 6 年前

我正在使用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 事件。
因为 OpenPoes 密钥存在,正在设置 page_available 带日期的键。现在()
当以下应用程序启动时,他们会发现 第\页可用 在存储器中输入键(第二个if)触发警报,我可以将它们重定向到错误页面。

问题:

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

这是我不明白的,因为 可用页 密钥是持久的,仍然存在于存储中(没有人删除),应用程序应该在第二个if和那个警报…但这并没有发生。

2 回复 | 直到 6 年前

Oram 6 年前

第一次启动应用程序时,出现以下情况:

应用程序集 openpages 带钥匙 Date.now() 价值。

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

因为 OpenPoes 密钥存在,正在设置 page_available 带日期的键。现在()

当以下应用程序启动时,他们会发现 可用页 在存储器中输入键(第二个if)触发警报,我可以将它们重定向到错误页面。

这里的全部想法是使用 storage 每次访问时触发的事件 localStorage .

所以当页面加载时,首先访问 OpenPoes 用于触发 存储 事件与 e.key == "openpages" .

之后它才注册事件侦听器。所以2只在您将页面加载到第二个选项卡上时发生。在第二个选项卡上,触发事件并注册事件侦听器。因为 存储 所有选项卡都会触发事件,正在执行第一个选项卡(已注册)的事件侦听器。

表1由 存储 事件与 e.key==“打开页面” 然后进入第一个 if . 在那里它触发了 存储 通过访问 可用页 关键。

此时,选项卡2事件侦听器对 存储 但这次 e.key == "page_available" 然后进入第二个 如果 显示警报的位置。

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

仅供参考:

如果要触发第一个选项卡上的警报而不是第二个选项卡上的警报,可以使用此代码来实现:

// 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);

阅读更多有关 本地存储器 here .
阅读更多有关 addEventListener here .

brk 6 年前

重新启动浏览器窗口后,一切仍然正常,并且我不明白为什么,因为页面可用密钥还在那里在仓库里

这是因为localstorage没有与 sessionStorage . 会话存储 一旦浏览器关闭就会被清除,但是 localStorage 仍然存在。

你仍然可以清除 本地存储器 通过清除浏览器缓存和cookie

还有这个片段 localStorage.openpages = Date.now(); 似乎不正确。

如果要在LocalStorage中设置值,请执行以下操作

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