对localStorage的误解 [英] Misunderstanding concept of localStorage

问题描述

我正在使用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. 具有Date.now()值的应用程序集openpages键.
2. 由于1.存储事件侦听器启动onLocalStorageEvent事件.
3. 因为openpages键存在，所以要用Date.now()设置page_available键
4. 启动以下应用程序时，它们会在存储中找到page_available键(如果是第二个)，则会触发警报，我可以将其重定向到错误页面.

问题:

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

这是我不明白的原因，因为page_available键是持久性的，仍然存在于存储中(没有一个被删除)，如果并且警报仍然存在，则应用程序应继续执行第二个操作……但是这没有发生

解决方案

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

1. 具有Date.now()值的应用程序集openpages键.
2. 由于1.存储事件侦听器启动onLocalStorageEvent事件.
3. 因为openpages键存在，所以要用Date.now()设置page_available键
4. 启动以下应用程序时，它们会在存储中找到page_available键(如果是第二个)，则会触发警报，我可以将其重定向到错误页面.

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

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

此后，它才注册事件侦听器.因此，只有在第二个选项卡上加载页面时才会发生2.在第二个选项卡上，将触发事件并注册事件侦听器.由于所有选项卡都触发了storage事件，因此正在执行第一个选项卡(已注册)的事件侦听器.

选项卡1由storage事件和e.key == "openpages"触发，并进入第一个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);

---

详细了解localStorage 此处 .
在addEventListener 此处中了解更多信息... >

I'm using this code published by 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>

Code is working like charm - doing exactly what I want - detect if an application it's already open in another tab browser or even in another browser window.

From my understanding:

The very first time when the application is started the followings thinks happen:

1. App set openpages key with Date.now() value.
2. Because of 1. storage event listener start onLocalStorageEvent event.
3. Because the openpages key exists, is setting page_available key with Date.now ()
4. When the followings apps are started they find page_available key in storage (the second if) the alert is triggered and I can redirect them to an error page.

QUESTION:

If I close all the browser windows and restart the app in a new winwdow everything still works fine.

This is what I don't understand because the page_available key is persistent is still there in the storage (no one deleted) the app should go on the second if and that the alert ... but this is not happening.

解决方案

The very first time when the application is started the followings thinks happen:

1. App set openpages key with Date.now() value.
2. Because of 1. storage event listener start onLocalStorageEvent event.
3. Because the openpages key exists, is setting page_available key with Date.now ()
4. When the followings apps are started they find page_available key in storage (the second if) the alert is triggered and I can redirect them to an error page.

The entire idea here is to communicate between the tabs using the storage event that is being triggered every time you access localStorage.

So when the page loads it first access the openpages key to trigger the storage event with e.key == "openpages".

Only after that it registers the event listener. So 2 only happens when you load the page on a second tab. On the second tab the event is triggered and the event listener is registered. Because the storage event is triggered for all the tabs, the event listener of the first tab (which is already registered) is being executed.

Tab 1 is triggered by the storage event with e.key == "openpages" and gets into the first if. There it triggers the storage event by accessing page_available key.

At this point tab 2 event listener reacts to the storage event but this time with e.key == "page_available" and gets into the second if where it shows the alert.

Note that if you don't close the tabs and open more tabs, tab 3 will trigger the storage event for all other tabs and you will have multiple tabs with alerts.

---

Just for reference:

If you want to trigger the alert on the first tab and not the second one you can achieve it with this code:

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

---

Read more about localStorage here.
Read more about addEventListener here.

这篇关于对localStorage的误解的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！