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 ...
随机推荐
- Java课程设计-随机密码生成器
1.团队课程设计博客链接 团队课程设计博客地址 2.个人负责模板 随即密码生成器算法 3.自己的代码提交记录截图 4.自己负责模块或任务详细说明 负责随机密码算法设计实现 通过不同种类选择下生成密码, ...
- 解决python第三方插件下载慢的方法
在CMD中输入: pip install 插件名字 --trusted-host pypi.douban.com -i http://pypi.douban.com/simple 就是更换国内源
- Spring-Boot:6分钟掌握SpringBoot开发
构建项目 从技术角度来看,我们要用Spring MVC来处理Web请求,用Thymeleaf来定义Web视图,用Spring Data JPA来把阅读列表持久化到数据库里,姑且先用嵌入式的H2数据库. ...
- Jquery一些常用的方法
整理以前的笔记,在学习JavaScript时候,经常会用到一些方法,但是有时忘掉了具体用法,因此记下.方便以后查阅. 这篇博文先说明这些方法的用途: removeClass().remove().cs ...
- Kindle 推送教程:教你用电子邮箱推送电子书
Kindle 推送是什么意思?如何通过电子邮件附件推送?或许刚刚接触 Kindle 的朋友对这个概念不是很清楚,其实所谓 Kindle 推送是指亚马逊提供的一个"Kindle 个人文档服务& ...
- 【黑马18期Java毕业生】黑马程序员Java全套资料+视频+工具
Java学习路线图引言: 黑马程序员:深知广大爱好Java的人学习是多么困难,没视频没资源,上网花钱还老被骗. 为此我们历时一个月整理这套Java学习路线图,不管你是不懂电脑的小 ...
- uva 10391
这个题,单纯做出来有很多种方法,但是时间限制3000ms,因此被TL了不知道多少次,关键还是找对最优解决方法,代码附上: #include<bits/stdc++.h> using nam ...
- java一些问题的思考
1.思考 为什么java规定作为程序入口点的main() 方法静态的? 在java中,main()方法是java应用程序的入口方法,也就是说,程序在运行的时候,第一个执行的方法就是main()方法,这 ...
- SpringMVC学习笔记(二)
一.导航 复杂类型的参数绑定 校验 异常处理 图片上传 json交互 拦截器 二.复杂类型参数绑定 ①.包装类型的pojo参数绑定 使用场景:实现商品查询条件传入. 实现方法:>通过添加Http ...
- 【NOIP2016提高组day2】蚯蚓
那么我们开三个不上升队列, 第一个记录原来的蚯蚓, 第二个记录乘以p的蚯蚓 第三个记录乘以(1-p)的蚯蚓, 在记录每条就要入队列的时间,就可以求出增加的长度 每次比较三个队列的队首,取最大的值x的切 ...