localStorage本地持久化存储API
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也可以作为一个选项了。符合预期。
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
