利用Storage Event实现页面间通信的示例代码


Posted in HTML / CSS onJuly 26, 2018

我们都知道触发window.onstorage必须满足以下两个条件:

  • 通过localStorage.setItem或sessionStorage.setItem保存(更新)某个storage
  • 保存(更新)这个storage时,它的新值必须与之前的值不同

上面的第二个条件,简单来讲就是:要么是storage的初始化,因为不存在的storage,其值为null;要么就是对已有storage的更新

举例:

// 初始化storage
window.localStorage.setItem('a', 123);

// 注册onstorage事件
window.onstorage = (e) => {
  console.log(e);
};

// 更新storage
window.localStorage.setItem('a', 123);

上面的最后一行代码并不会触发onstorage事件,因为a的值并没有变化,前后都是123,所以浏览器判定这次更新是无效的

由于onstorage事件是浏览器触发的,所以如果我们打开了多个相同域名下的页面,并在其中任一一个页面执行window.localStorage.setItem方法(还要保证满足文章开头提到的第二个条件),那么其他页面如果监听了onstorage事件,则这些页面中的onstorage事件回调都会被执行

举例:

// http://www.example.com/a.html
<script>
// 注册onstorage事件
window.onstorage = (e) => {
  console.log(e);
};
</script>
// http://www.example.com/b.html
<script>
// 注册onstorage事件
window.onstorage = (e) => {
  console.log(e);
};
</script>
// http://www.example.com/c.html
<script>
// 触发onstorage事件
window.localStorage.setItem('a', new Date().getTime());
</script>

只要保证c页面在a和b页面之后打开(哪怕三个页面不在同一浏览器窗口,这里需要区别窗口与tab页的区别),那么a和b页面中的onstorage事件都会被触发

现在我们已经知道如何利用storage event实现了页面之间的通信,那么这个通信对于我们有何用途呢?

其实我们只需知道是哪个storage的更新操作触发了onstorage事件就足够了,那么我们如何知道呢?onstorage事件回调和其他事件回调函数一样,也接收一个event对象参数,在这个对象中有3个有用的属性,它们分别是:

  • key 被初始化或更新的storage的键名
  • oldValue 被初始化或更新的storage之前的值
  • newValue 被初始化或更新的storage之后的值

结合这3个关键属性,我们就可以实现页面间的数据同步

最后提一下localStorage与sessionStorage的区别

localStorage 里面存储的数据没有过期时间设置,而存储在 sessionStorage 里面的数据在页面会话结束时会被清除

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 border-radius属性详解
Jul 05 HTML / CSS
css3新增颜色表示方式分享
Apr 15 HTML / CSS
CSS3中box-shadow的用法介绍
Jul 15 HTML / CSS
纯css3实现宠物小鸡实例代码
Oct 08 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
css3 transform过渡抖动问题解决
Oct 23 HTML / CSS
HTML5 canvas基本绘图之绘制矩形
Jun 27 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
基于HTML5 Canvas的3D动态Chart图表的示例
Nov 02 HTML / CSS
canvas学习总结三之绘制路径-线段
Jan 31 HTML / CSS
Canvas获取视频第一帧缩略图的实现
Nov 11 HTML / CSS
clear 万能清除浮动(clearfix:after)
May 21 HTML / CSS
详解移动端Html5页面中1px边框的几种解决方法
Jul 24 #HTML / CSS
htnl5利用svg页面高斯模糊的方法
Jul 20 #HTML / CSS
html5 input输入实时检测以及延时优化
Jul 18 #HTML / CSS
利用canvas实现图片压缩的示例代码
Jul 17 #HTML / CSS
canvas 如何绘制线段的实现方法
Jul 12 #HTML / CSS
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
Jul 12 #HTML / CSS
如何用canvas实现在线签名的示例代码
Jul 10 #HTML / CSS
You might like
CI框架学习笔记(一) - 环境安装、基本术语和框架流程
2014/10/26 PHP
php使用COPY函数更新配置文件的方法
2015/06/18 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
thinkphp关于简单的权限判定方法
2017/04/03 PHP
javascript中的parseInt和parseFloat区别
2013/07/12 Javascript
href下载文件根据id取url并下载
2014/05/28 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
node.js中的fs.open方法使用说明
2014/12/17 Javascript
jQuery实现防止提交按钮被双击的方法
2015/03/24 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
微信小程序 css使用技巧总结
2017/01/09 Javascript
对于input 框限定输入值为浮点型的js代码
2017/09/25 Javascript
Vue使用json-server进行后端数据模拟功能
2018/04/17 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
Python 使用PIL中的resize进行缩放的实例讲解
2018/08/03 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
浅谈Python中的全局锁(GIL)问题
2019/01/11 Python
Python连接字符串过程详解
2020/01/06 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
2013/04/25 HTML / CSS
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
家具促销活动方案
2014/02/16 职场文书
继承公证书样本
2014/04/04 职场文书
社区矫正工作方案
2014/06/04 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
Django实现WebSocket在线聊天室功能(channels库)
2021/09/25 Python
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android