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>

代码的工作原理就像魅力一样-完全按照我想要的方式工作-检测某个应用程序是否已经在其他标签浏览器或什至在其他浏览器窗口中打开了。

据我了解：

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

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

问题：

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

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

Answer 1

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


应用集openpages的键，其值为Date.now()。

由于1.存储事件侦听器启动onLocalStorageEvent事件。

因为存在openpages键，所以要用Date.now（）设置page_available键

启动以下应用程序后，他们会在存储中找到page_available键（如果是第二个键），则会触发警报，我可以将其重定向到错误页面。

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

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

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

选项卡1由storage的{{1}}事件触发，并进入第一个e.key == "openpages"。在那里，它通过访问if键来触发storage事件。

这时，选项卡2事件侦听器对page_available事件做出反应，但是这次是与storage一起进入第二个e.key == "page_available"，在那里显示警报。

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

仅供参考：

如果要在第一个选项卡而不是第二个选项卡上触发警报，可以使用以下代码来实现：

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); here。
详细了解localStorage here。

Answer 2

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

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

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

此摘要localStorage.openpages = Date.now();似乎也不正确。

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

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

对localStorage的误解

2 个答案: