Can't see localstorage event across tabs

I'm trying to create a simple proof-of-concept regarding the use of localStorage to trigger tabs in my application when changes occur. I know this is possible based on other articles I've seen. I understand the spec states the event will fire on ever page except the one I'm on - this is in fact what I want. However, I can't seem to get this simple demo to actually work.

I've taken the code below, and opened up multiple tabs of it. Using my Chrome Dev Tools, I can check >localStorage in the console and see the value before and after the "Add" and "Clear" buttons are pressed - they are in fact functioning as desired in storing and clearing the key value pair into local storage, yet the event isn't firing the alert.

I even placed breakpoints in the javascript in my Chrome Dev Tools of each tab, yet I can never seem to get the "onStorageEvent" function to hit in any tab opened.

What am I doing wrong?

<!DOCTYPE html>
<html>

<head>
  <title>Tab1</title>
</head>

<body>
  <button id="add" onclick="localStorage.setItem('tab','changed')">Add</button>
  <button id="clear" onclick="localStorage.clear()">Clear</button>
  <script type="text/javascript">
    function onStorageEvent() {
      alert("storage event: " + localStorage.getItem("tab"));
    }

    window.addEventListener('storage', onStorageEvent, false);
  </script>
</body>

</html>

标签： javascript events tabs local-storage

1条回答

可以哭但决不认输i

2楼-- · 2020-04-17 04:57

In order for the window.addEventListener to work on storage:

you MUST access the page using web-server (http://a.b.c.d/ or http://domain)
- Direct access (using file:/// or c:\file.html will not work.
  (chrome and ie ignore it, firefox and safari can run it anyway).
I would consider also removing the 3rd, it is not relevant to elements in your DOM tree, and it might cause troubles (let the browser have it's defaults).

This code was tested in Chrome 52, Firefox 47+48, IE 11, Safari 5.7.1

<!DOCTYPE html>
<html>

<head>
  <title>Tab1</title>
</head>

<body>
  <button id="add" onclick="localStorage.setItem('tab','changed')">Add</button>
  <button id="clear" onclick="localStorage.clear()">Clear</button>
  <script type="text/javascript">
    function onStorageEvent() {
      alert("storage event: " + localStorage.getItem("tab"));
    }

    window.addEventListener('storage', onStorageEvent);
  </script>
</body>

</html>

0人赞添加讨论(0) 举报

Can't see localstorage event across tabs

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间