03月06, 2018

localStorage event

我算是比较拖拉的人,年前有一好友问我:两个页面,一个页面里面通过localStorage设置了某个值,在另外一个页面怎么监听到。然后当时我的回答是另外一个页面轮询(即setInterval),但其实这个是会影响页面性能的。

当碰到解决不了的问题,我也只能在脑海中有记着,且在记事本中写了一条(需要做不紧急的事)。今天终于闲下来,找了一下方案,还真有。

通过监听storage事件,且这个事件必须要绑定在window上面。

于是就有了下面的HTML代码:

<button id="test">点我</button>
<script>
    // 添加监听事件
    window.addEventListener('storage', function(e) {  
          alert(123);
    }, false);
    // 给按钮绑定事件
    let obtn = document.getElementById("test");
    obtn.onclick = function() {
        localStorage.setItem("a", 1);
    }
</script>

测试了,发现根本不行。然而在我打开application,手动clear的时候,触发了storage的事件。

说白了,我还是犯傻了,因为上面提到是两个页面,查了stackoverflow,上面也是这样说的。

The window.onstorage event will fire when:

You set the window.onstorage handler in one tab, and the storage changed in another tab

The two tabs mentioned above have the same document.domain value. For example document.domain === stackoverflow.com

所以就写两个页面吧:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test1</title>
</head>
<body>
    <button id="test">点我</button>
    <script>
        let obtn = document.getElementById("test");
        obtn.onclick = function() {
            localStorage.setItem("a", 1);
        }
    </script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test2</title>
</head>
<body>
    <script>
        window.addEventListener('storage', function(e) {  
          alert(123);
        }, false);
    </script>
</body>
</html>

随后将这两个html放在一个目录下,在这个目录下随便起一个静态服务即可(如http-server)

当点击页面一的按钮时,就可以看到页面二有弹框了。

本文链接:www.my-fe.pub/post/localStorage-event.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。