你可能不知道的LocalStorage用法

hlcfan 发布于2019-08-26 10:46 / 3309人阅读

摘要：也就是说，跨域访问其他站点的是行不通的。是以字符串的形式保存数据的。表示的是被改变的的值，是改变后最新的值，是旧的值。效果如下写在后面在平时的业务开发中，使用的频率也不低，但确实是不知道还可以这么用。

写在前面

本文首发于公众号：符合预期的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是旧的值。

实现两个页面同步的效果

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

效果如下：

写在后面

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

混合云专线服务可能不知道地方你知道你应该知道你不知道的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106741.html

cookie和localStorage那些事

摘要：它的大小限制为左右，是网景公司的前雇员在年月的发明。字符串转义通过来设置的有效期。和的用法和属性允许在浏览器中存储对的数据。用于临时保存同一窗口或标签页的数据，在关闭窗口或标签页之后将会删除这些数据。是浏览器关闭后就立即清除。一、localStorage、cookie、sessionStorage的区别与练习 showImg(https://segmentfault.com/img/...

Jeffrrey 2019-08-26 14:04 评论0 收藏0
localStorage、sessionStorage、Cookie的区别及用法

摘要：的区别及用法是本地存储，存储在客户端，包括和。仅在当前会话下有效，关闭页面或浏览器后被清除。源生接口可以接受，亦可再次封装来对和有更好的支持。但需要程序员自己封装，源生的接口不友好。每个最多只能有条，每个长度不能超过。 localStorage、sessionStorage、Cookie的区别及用法 showImg(https://segmentfault.com/img/bVYLlH...

sf_wangchong 2019-08-21 17:41 评论0 收藏0
localStorage、sessionStorage、Cookie的区别及用法

摘要：的区别及用法是本地存储，存储在客户端，包括和。仅在当前会话下有效，关闭页面或浏览器后被清除。源生接口可以接受，亦可再次封装来对和有更好的支持。但需要程序员自己封装，源生的接口不友好。每个最多只能有条，每个长度不能超过。 localStorage、sessionStorage、Cookie的区别及用法 showImg(https://segmentfault.com/img/bVYLlH...

TalkingData 2019-08-05 12:25 评论0 收藏0
HTML5 进阶系列：web Storage

摘要：构造函数在实际项目中，可能需要多次对进行操作，我们可以通过一个构造函数来更好的操作。注意在谷歌浏览器中，需要在不同标签页中修改才会触发该事件，即网页监听该事件，在网页中修改，则网页会触发事件函数。前言 HTML5 的 web Storage 存储方式有两种：localStorage 和 sessionStorage。这两种方式都是通过键值对保存数据，存取方便，不影响网站性能。他们的...

沈建明 2019-08-05 11:08 评论0 收藏0
HTML5 进阶系列：web Storage

摘要：构造函数在实际项目中，可能需要多次对进行操作，我们可以通过一个构造函数来更好的操作。注意在谷歌浏览器中，需要在不同标签页中修改才会触发该事件，即网页监听该事件，在网页中修改，则网页会触发事件函数。前言 HTML5 的 web Storage 存储方式有两种：localStorage 和 sessionStorage。这两种方式都是通过键值对保存数据，存取方便，不影响网站性能。他们的...

iflove 2019-08-20 16:04 评论0 收藏0