你可能不知道的LocalStorage用法

 阅读约 6 分钟

写在前面

本文首发于公众号:符合预期的CoyPan

上周在看关于react-redux的一个在线ppt时,偶然发现了一个现象:

如果我开两个浏览器tab,同时访问这个页面,我在其中一个页面切换ppt,另外一个页面会跟着变化。链接在这里:

https://blog.isquaredsoftware...

效果如下:

图片描述

研究了一下,这个效果其实就是用localStorage来实现的。

localStorage基本知识点

localStorage, 是一个用来做本地持久化存储的Web Api。 localStorage以键值对的形式存储数据。用法很简单:

// 设置
localStorage.setItem('myCat', 'Tom');

// 获取
let cat = localStorage.getItem('myCat');

// 移除
localStorage.removeItem('myCat');

// 移除所有
localStorage.clear();

有几个点需要注意:

1、localStorage是以『源(origin)』为维度进行存储的。也就是说,跨域访问其他站点的localStorage是行不通的。

2、localStorage是以字符串的形式保存数据的。

3、对于每一个域,localStorage最多允许存储几M数量级的数据(具体数字因浏览器而异)。

localStorage可以用来做什么:

存储登录token,用户信息等数据;本地持久化保存业务数据;保存代码,以提高网站性能。等等等等…还有本文所要介绍的页面同步。

监听LocalStorage变化

localStorage被改变时(从无到有,从有到无,值改变),会触发一个storage事件。我们可以在window上监听到这个事件。

window.addEventListener('storage', () => {
  ...
});

window.onstorage = () => {
  ...
};

这里需要注意的是,在改变localStorage的当前页面,是无法监听到storage事件的。如果我同时打开了多个同源的页面: A页面、B页面、C页面,当在A页面中修改localstorage时,B页面和C页面中都可以监听到storage事件,而A页面是不会触发storage事件的。

一个storage事件的实例如下:

clipboard.png

其中比较关键的是keynewValueoldValue这几个值。key表示的是被改变的localStorage的key值,newValue是改变后最新的值,oldValue是旧的值。

实现两个页面同步的效果

了解了上面的知识点,就可以解释本文开头所提到的网页是如何实现多页面同步的了。来实现一个简单的。

<html>
<head>
    <style>
        .count {
            font-size: 20px;
            color: red;
        }
    </style>
</head>
<body>
    <div class="count">0</div>
    <button>click</button>
    <script>
        window.onload = function () {
          
            var btnEl = document.querySelector('button');
            var countEl = document.querySelector('.count');

            btnEl.addEventListener('click', function () {
                var curCount = Number(localStorage.getItem('count'));
                var newCount = curCount + 1;
                countEl.innerHTML = newCount;
                localStorage.setItem('count', newCount);
            });

            window.addEventListener('storage', function (e) {
                var newValue = e.newValue;
                countEl.innerHTML = newValue;
            });
        }
    </script>
</body>

</html>

效果如下:
图片描述

写在后面

在平时的业务开发中,localStorage使用的频率也不低,但确实是不知道还可以这么用。以后有遇到页面同步的需求时,localStorage也可以作为一个选项了。符合预期。

图片描述

阅读 861发布于 8月13日
推荐阅读
符合预期的FE
用户专栏

努力成为一名符合预期的FE,成为一名出色的工程师。欢迎关注我的微信公众号:符合预期的CoyPan

2141 人关注
37 篇文章
专栏主页
目录