js页面间通信方法（storage事件）（浏览器页面间通信方法）
在写页面的时候有时会遇到这样的需求，需要两个页面之间传递数据或者一个事件。这个时候，就需要用到我今天所要讲的storage事件，学习这个事件之前，需要先了解localStorage的用法。具体用法可以查看其他文档。出发storage事件的条件如下：
- 同一个浏览器打开了两个同源的页面
- 一个网页中修改
localStorage - 另一网页注册了
storage事件
storage事件，只有在同源页面下，才有作用，不同源是没有作用的。那么什么是同源呢？
URL由协议、域名、端口和路径组成，如果两个URL的协议、域名和端口相同，则表示他们同源。举个栗子：
http://www.wszdaodao.cn/demo/index.html
//这个网址，协议是http://域名是www.wszdaodao.cn，端口是80（默认端口可以省略） //对比URL：
http://www.wszdaodao.cn/demo2/other.html //同源
http://www.wszdaodao.cn:81/demo/index.html //不同源
http://sxh.wszdaodao.cn/demo/index.html //不同源
http://www.mamama.cn/demo/index.html //不同源
所以在测试时候，一定要保证是同源页面。
下面是两页面间交互代码，实现非常简单，pageA与pageB之间通信。
page A : 设置localStorage
<!DOCTYPE html>
<html>
<head lang="en">
<title>page A</title>
</head>
<body>
<button>click<button>
</body>
<script>
document.querySelector('button').onclick = function(){
localStorage.setItem('Num', Math.random()*10);
}
</script>
</html>
page B： 监听storage事件
<!DOCTYPE html>
<html>
<head lang="en">
<title>page B</title>
</head>
<body>
<script>
window.addEventListener("storage", function (e) {
console.log(e)
console.log(e.newValue)
});
</script>
</body>
</html>
js页面间通信方法（storage事件）（浏览器页面间通信方法）的更多相关文章
- JS异步加载，JQ事件不被执行解决方法
一,在我们实现动态生成HTML代码时会出现,使用JQ方法会不被执行,解决方法,如下:使用jquery的委托事件,将该方法委托到页面已经存在的一个节点上 <!DOCTYPE html> &l ...
- JS学习笔记：（一）浏览器页面渲染机制
浏览器的内核主要分为渲染引擎和JS引擎.目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari).这里 ...
- js实现默认或者触发一个事件选中元素内容的方法
方法一:非文本框.文本域的选中内容方法 <!Doctype html> <html> <head> <script type="text/javas ...
- webpack+vue 组件间传参(单一事件中心管理组件通信--$root)，如果有路由的话会失效
先给一个例子: <body> <div id="box"> <com-a></com-a> <com-b></co ...
- storage事件 js页面间通信
1.概述 https://developer.mozilla.org/en-US/docs/Web/Events/storage localStorage 或者sessionStorage存储的数据发 ...
- sessionStorage html5客户端本地存储之sessionStorage及storage事件
可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相识,方 ...
- html5客户端本地存储之sessionStorage及storage事件
首先您可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相 ...
- 读取本地文件理解FileReader对象的方法和事件以及上传按钮的美化。
一.FileReader对象 用来把文件读入内存,并且读取文件中的数据.FileReader对象提供了异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 浏览器支持情况, ...
- HTML5 storage事件监听
引用<h5移动web开发指南>上的话: “当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发” 所以,localStorage st ...
- 把cookie以json形式返回，用js来set cookie.（解决手机浏览器未知情况下获取不到cookie）
.继上一篇随笔,链接点我,解决手机端cookie的问题. .上次用cookie+redis实现了session,并且手机浏览器可能回传cookies有问题,所以最后用js取出cookie跟在请求的ur ...
随机推荐
- 201521123033《Java程序设计》第14周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...
- 201521123040《Java程序设计》第11周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...
- 201521123027<java程序设计>第14周作业总结
1.本周作业总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2.书面作业 Q1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自己 ...
- Java： AutoCloseable接口
K7 增加了一些新特性,其中报错AutoCloseable 等.新特性包括如下,下面主要说说AutoCloseable . 在JDK7 中只要实现了AutoCloseable 或Closeable 接 ...
- sscanf和正则表达式
sscanf() - 从一个字符串中读进与指定格式相符的数据. 函数原型: Int sscanf( string str, string fmt, mixed var1, mixed var ...
- Android 之数据存储(sdCard,sharedPreference,sqlite数据库)
sdCard:默认路径在 /storage/sdcard/... Android支持OpenFileOutput和openFileInput方式访问手机存储器上的文件. Context提供了如下两个方 ...
- C语言编译过程及数据类型
写在前面 C语言可以称得上是高级语言中的低级语言,接下来一段时间,我会写一下文章关于c语言,把它的神秘面纱一 一揭开.下面主要是c语言的C语言编译过程及数据类型 源文件编译过程 为了使计算机能执行高级 ...
- （BCB）C++ Builder 6.0在Win7下如何使用帮助Help
因为Win7.Win8.Win8.1不再支持.hlp帮助类型,在BCB中无法打开帮助Help,打开时出错:"不包括功能"或"不受支持的帮助",提示如下: 为何无 ...
- Spring-Boot:Spring Cloud构建微服务架构
概述: 从上一篇博客<Spring-boot:5分钟整合Dubbo构建分布式服务> 过度到Spring Cloud,我们将开始学习如何使用Spring Cloud 来搭建微服务.继续采用上 ...
- 每周分享之 二 http协议(3)
本次分享http协议,共分为三部分,这是第三部分,主要讲解一个完整的http请求都经过哪些步骤,当我们在地址栏中输入网址,到返回页面都经历了什么 1.输入网址 当我们在浏览器中输入网址的时候,浏览器就 ...