利用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 动画效果的总结详解
May 09 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
一款利用css3的鼠标经过动画显示详情特效的实例教程
Dec 29 HTML / CSS
详解CSS3选择器的使用方法汇总
Nov 24 HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 HTML / CSS
详解通过HTML5 Canvas实现图片的平移及旋转变化的方法
Mar 22 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
AmazeUI 按钮交互的实现示例
Aug 24 HTML / CSS
CSS实现章节添加自增序号的方法
Jun 23 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中ADODB类详解
2008/03/25 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php中fsockopen用法实例
2015/01/05 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
JavaScript中的异常捕捉介绍
2014/12/31 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
详解Bootstrap四种图片样式
2016/01/04 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
JS实现页面跳转参数不丢失的方法
2016/11/28 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
jQuery基于cookie实现换肤功能实例
2017/10/14 jQuery
nodejs更改项目端口号的方法
2018/05/13 NodeJs
layui监听select变化,以及设置radio选中的方法
2019/09/24 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
Python解析json文件相关知识学习
2016/03/01 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
python实现KNN分类算法
2019/10/16 Python
基于python实现检索标记敏感词并输出
2020/05/07 Python
Python使用socket_TCP实现小文件下载功能
2020/10/09 Python
英国网上花店:Bunches
2016/11/29 全球购物
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
名人珠宝设计师:Melinda Maria Jewelry
2019/03/06 全球购物
丹麦优惠购物网站:PLUSSHOP
2019/03/24 全球购物
Araks官网:纽约内衣品牌
2020/10/15 全球购物
银行实习生的自我评价
2013/12/09 职场文书
学籍证明模板
2014/11/21 职场文书
七年级上册生物的课件
2019/08/07 职场文书
我的收音机情缘
2022/04/05 无线电