你可能不知道的LocalStorage用法

时间 2019-11-06

标签可能不知道 localstorage 用法繁體版

原文原文链接

写在前面

本文首发于公众号：符合预期的CoyPanjavascript

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

若是我开两个浏览器tab，同时访问这个页面，我在其中一个页面切换ppt，另一个页面会跟着变化。连接在这里：html

blog.isquaredsoftware.com/presentatio…java

效果以下：react

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

localStorage基本知识点

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

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

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

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

// 移除全部
localStorage.clear();
复制代码

有几个点须要注意：浏览器

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

二、localStorage是以字符串的形式保存数据的。性能

三、对于每个域，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也能够做为一个选项了。符合预期。