在写页面的时候有时会遇到这样的需求，需要两个页面之间传递数据或者一个事件。这个时候，就需要用到我今天所要讲的storage事件，学习这个事件之前，需要先了解localStorage的用法。具体用法可以查看其他文档。出发storage事件的条件如下：

  1. 同一个浏览器打开了两个同源的页面
  2. 一个网页中修改localStorage
  3. 另一网页注册了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事件）（浏览器页面间通信方法）的更多相关文章

  1. JS异步加载，JQ事件不被执行解决方法

    一,在我们实现动态生成HTML代码时会出现,使用JQ方法会不被执行,解决方法,如下:使用jquery的委托事件,将该方法委托到页面已经存在的一个节点上 <!DOCTYPE html> &l ...

  2. JS学习笔记：（一）浏览器页面渲染机制

    浏览器的内核主要分为渲染引擎和JS引擎.目前市面上常见的浏览器内核可以分为这四种:Trident(IE).Gecko(火狐).Blink(Chrome.Opera).Webkit(Safari).这里 ...

  3. js实现默认或者触发一个事件选中元素内容的方法

    方法一:非文本框.文本域的选中内容方法 <!Doctype html> <html> <head> <script type="text/javas ...

  4. webpack+vue 组件间传参(单一事件中心管理组件通信--$root)，如果有路由的话会失效

    先给一个例子: <body> <div id="box"> <com-a></com-a> <com-b></co ...

  5. storage事件 js页面间通信

    1.概述 https://developer.mozilla.org/en-US/docs/Web/Events/storage localStorage 或者sessionStorage存储的数据发 ...

  6. sessionStorage html5客户端本地存储之sessionStorage及storage事件

    可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相识,方 ...

  7. html5客户端本地存储之sessionStorage及storage事件

    首先您可以看一下<JavaScript本地存储实践(html5的localStorage和ie的userData)>sessionStorage和上文中提到的localStorage非常相 ...

  8. 读取本地文件理解FileReader对象的方法和事件以及上传按钮的美化。

    一.FileReader对象 用来把文件读入内存,并且读取文件中的数据.FileReader对象提供了异步API,使用该API可以在浏览器主线程中异步访问文件系统,读取文件中的数据. 浏览器支持情况, ...

  9. HTML5 storage事件监听

    引用<h5移动web开发指南>上的话: “当同源页面的某个页面修改了localStorage,其余的同源页面只要注册了storage事件,就会触发” 所以,localStorage  st ...

  10. 把cookie以json形式返回，用js来set cookie.（解决手机浏览器未知情况下获取不到cookie）

    .继上一篇随笔,链接点我,解决手机端cookie的问题. .上次用cookie+redis实现了session,并且手机浏览器可能回传cookies有问题,所以最后用js取出cookie跟在请求的ur ...

随机推荐

  1. SpringMVC第三篇【收集参数、字符串转日期、结果重定向、返回JSON】

    业务方法收集参数 我们在Struts2中收集web端带过来的参数是在控制器中定义成员变量,该成员变量的名字与web端带过来的名称是要一致的-并且,给出该成员变量的set方法,那么Struts2的拦截器 ...

  2. mysql水平分表和垂直分表的优缺点

    表分割有两种方式: 1.水平分割:根据一列或多列数据的值把数据行放到两个独立的表中. 水平分割通常在下面的情况下使用. •表很大,分割后可以降低在查询时需要读的数据和索引的页数,同时也降低了索引的层数 ...

  3. tomcat The specified JRE installation does not exist

    window->perferences->server->installed runtimes 里tomcat删掉,重新建立服务,再运行

  4. PuTsangTo-单撸游戏开发02 测试场景与单轴移动

    且不说立项与设计阶段的工作量,一个完整的游戏在开发阶段设计的职责范围也是很广,还有个大问题就是PuTsangTo项目也是本人在边学边做,截止目前还是满满的无从下手的感觉,一方面是技能与经验不足,另一方 ...

  5. iOS开发中KVC、KVO简介

    在iOS开发中,KVC和KVO是经常被用到的.可以使用KVC对对象的属性赋值和取得对象的属性值,可以使用KVO监听对象属性值的变化.简单介绍一下KVC和KVO. 一:键值编码(KVC) KVC,全称 ...

  6. WPA/WPA2加密破解

    WPA/WPA2无线密码破解这里主要介绍两种方法:穷举PIN码.穷举密码 穷举PIN码(共11000种组合)破解速度快,需要一些条件(路由器支持WPS.QSS功能),路由器信号良好.无论密码多复杂,条 ...

  7. AngularJS概念概述和第一个使用例子

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 概念概述 本节使用一个简单的例子简要介绍了AngularJS的重要组成部分. 概念 描述 ...

  8. 关于 HashMap 随笔

    hashMap 的一些认识: 基于哈希表的Map接口的非同步实现,定义了键映射到值的规则 此实现提供所有可选的映射操作,并允许使用null值和null键 根据hash算法,确定key-value的存贮 ...

  9. css常见布局方式

    CSS常见布局方式 以下总结一下CSS中常见的布局方式.本人才疏学浅,如有错误,请留言指出. 如需转载,请注明出处:CSS常见布局方式 目录: 使用BFC隐藏属性 float + margin abs ...

  10. System.Object简介

    Object中的公共方法解释: 公共方法: Equals: public class Object { public virtual Boolean Equals(Object obj) { //如果 ...