共计 1751 个字符，预计需要花费 5 分钟才能阅读完成。
写在前面
本文首发于公众号：符合预期的 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 事件的实例如下：
其中比较关键的是 key，newValue，oldValue 这几个值。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 也可以作为一个选项了。符合预期。
