storage事件 js页面间通信
1、概述
https://developer.mozilla.org/en-US/docs/Web/Events/storage
localStorage 或者sessionStorage存储的数据发生时会触发storage事件。
2、示例
示例中会展示所有的storage事件属性值。
A文件：
<!DOCTYPE html>
<html lang="zh"> <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head> <body>
<script type="text/javascript">
window.addEventListener("storage", function(e) {
//事件目标 输出：[object Window]对象（因为绑定在window上）
console.log("target: "+e.target);
//事件类型 输出：storage
console.log("type : "+e.type);
//事件是否冒泡 输出：false
console.log("bubbles : "+e.bubbles);
//事件是否可撤销 输出：false
console.log("tarcancelable: "+e.cancelable);
//键名
console.log("key: "+e.key);
//键值原值
console.log("oldValue: "+e.oldValue);
//键值新值
console.log("newValue: "+e.newValue);
//触发事件的url
console.log("url: "+e.url);
//受影响的存储空间 输出[object Storage]
console.log("storageArea: "+e.storageArea);
});
</script>
</body> </html>
B文件：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
</head> <body>
<script type="text/javascript">
localStorage.clear();
localStorage.setItem('foo', 'bar');
</script>
</body> </html>
操作：先打开A页面，后打开B页面。
B页面控制台输入：
storage事件效果：
storage事件 js页面间通信的更多相关文章
- js页面间通信方法（storage事件）（浏览器页面间通信方法）
在写页面的时候有时会遇到这样的需求,需要两个页面之间传递数据或者一个事件.这个时候,就需要用到我今天所要讲的storage事件,学习这个事件之前,需要先了解localStorage的用法.具体用法可以 ...
- js 页面间的通信
看了一下公司原来的代码,原页面ajax post返回一个页面完整的HTML,然后再打开一个新页面并输出ajax返回的所有代码到新页面上,在新页面上以表单提交的形式实现重定向. 任凭我想了半天也没想出来 ...
- [转] 微信小程序页面间通信的5种方式
微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...
- UWP开源项目 LLQNotifier 页面间通信利器（移植EventBus）
前言 EventBus是一个Android版本的页面间通信库,这个库让页面间的通信变得十分容易且大幅降低了页面之间的耦合.小弟之前玩Android的时候就用得十分顺手,现在玩uwp就觉得应该在这平台也 ...
- JavaScript之iframe页面间通信
[1] iframe父子页面间通信 1.相互调用对方的方法 |> 子级页面调用父级页面 window.parent.父级页面方法(args) |> 父级页面调用子级页面 document. ...
- 如何实现electron多页面间通信
如何实现electron多页面间通信 1,业务需求: 总共有两个页面,页面A显示数据,页面B处理数据,主线程Main 2,实现的技术方案: 在主线程中打开页面A和B,B页面不进行显示,主要负责处理从A ...
- 聊聊Vue.js组件间通信的几种姿势
写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...
- Prism for WPF再探（基于Prism事件的模块间通信）
上篇博文链接 Prism for WPF初探(构建简单的模块化开发框架) 一.简单介绍: 在上一篇博文中初步搭建了Prism框架的各个模块,但那只是搭建了一个空壳,里面的内容基本是空的,在这一篇我将实 ...
- MUI+html5+javascript 点击事件触发页面间传值
关于如何进行页面转跳,请看 https://www.cnblogs.com/JUNELITTLEPANDA/p/15956176.html,以下跳转方法是采用的其中一种 1- 仅适用于移动端,pc端 ...
随机推荐
- 跳石头（NOIP2015) (二分查找)
原题传送门 好久没更了..昨天去学zkw线段树,被zxyer狠狠地D了一顿.. 来补坑.. 这是一道很奇特的题目. 根据题目可以看出这道题有二分题具有的性质.. 不懂二分性质的可以看我以前的博客 传送 ...
- glGenTextures
http://blog.sina.com.cn/s/blog_67ede2d80100w3i8.html glGenTextures(GLsizei n, GLuint *textures)函数说明 ...
- VLC-开源播放器编译
http://blog.sina.com.cn/s/blog_7b9d64af0101jpvy.html 需要VLC 在iOS开发中,如果你的程序中播放视频,并且多媒体播放功能是你iOS程序的核心功能 ...
- python 删除字符串中的连续空格只保留一个
目标是要去掉多余的空格字符,在相邻字符串中,只保留一个空格 紫梧桐 - 蛋壳公寓朝阳门店 郑田力 可以利 ...
- mysql 共享空间转为独立表空间
由于以前的mysql配置为共享表空间,服务器空间不足,清理日志表里的数据后,数据库并没缩小,照成空间浪费,现在修改为独立表空间 #独立表空间innodb_file_per_table=1 #停止事物日 ...
- jquery mloading
在执行jQuery的ajax时,有的时候请求回来会有较长时间,这个时候,如果什么都没有显示,用户会觉得网站卡住了,所以这个时候,来个mloading会使用户体验更好些. 使用方法很简单 将jquery ...
- Codeforces Round #166 (Div. 2) A. Beautiful Year【暴力枚举/逆向思维/大于当前数且每个位数不同】
A. Beautiful Year time limit per test 2 seconds memory limit per test 256 megabytes input standard i ...
- HDU 5886 Tower Defence（2016青岛网络赛 I题，树的直径 + DP）
题目链接 2016 Qingdao Online Problem I 题意 在一棵给定的树上删掉一条边,求剩下两棵树的树的直径中较长那的那个长度的期望,答案乘上$n-1$后输出. 先把原来那棵树的 ...
- Tarjan缩点+LCA【p2783】有机化学之神偶尔会做作弊
Description 你翻到那一题:给定一个烃,只含有单键(给初中生的一个理解性解释:就是一堆碳用横线连起来,横线都是单条的). 然后炎魔之王拉格纳罗斯用他的火焰净化了一切环(???).所有的环状碳 ...
- [COCI2015]ZMIJA
题目大意: 一个$n\times m(n,m\leq1000)$的格子中有若干金币,从左下角出发,每一步可以进行如下操作: 1.向当前方向前进一格: 2.向上移动一步,并调转当前方向. 一开始的方向是 ...