利用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实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
HTML5 自动聚焦(autofocus)属性使用介绍
Aug 07 HTML / CSS
html5定位获取当前位置并在百度地图上显示
Aug 22 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
html5 初试 indexedDB(推荐)
Jul 21 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 HTML / CSS
html5给汉字加拼音加进度条的实现代码
Apr 07 HTML / CSS
Html5饼图绘制实现统计图的方法
Aug 05 HTML / CSS
简洁自适应404页面HTML好看的404源码
Dec 16 HTML / CSS
css背景和边框标签实例详解
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
php 获取select下拉列表框的值
2010/05/08 PHP
php中实现记住密码自动登录的代码
2011/03/02 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
Javascript 验证上传图片大小[客户端]
2009/08/01 Javascript
js 编程笔记 无名函数
2011/06/28 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
利用js动态添加删除table行的示例代码
2013/12/16 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
ajax跨域调用webservice的实现代码
2016/05/09 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
Bootstrap时间选择器datetimepicker和daterangepicker使用实例解析
2016/09/17 Javascript
webpack开发跨域问题解决办法
2017/08/03 Javascript
详解webpack + react + react-router 如何实现懒加载
2017/11/20 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
javascript读取本地文件和目录方法详解
2020/08/06 Javascript
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
在Django的上下文中设置变量的方法
2015/07/20 Python
Tensorflow的可视化工具Tensorboard的初步使用详解
2018/02/11 Python
Python 中Pickle库的使用详解
2018/02/24 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
伦敦平价潮流珠宝首饰品牌:Astrid & Miyu
2016/10/10 全球购物
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
社区庆八一活动方案
2014/02/02 职场文书
师德个人剖析材料
2014/02/02 职场文书
法律系毕业生求职信
2014/05/28 职场文书
平面设计师岗位职责
2014/09/18 职场文书
《称赞》教学反思
2016/02/17 职场文书
python 中的@运算符使用
2021/05/26 Python
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang