在写页面的时候有时会遇到这样的需求，需要两个页面之间传递数据或者一个事件。这个时候，就需要用到我今天所要讲的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. 201521123011《Java程序设计》 第12周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...

  2. dbda数据库类

    <?phpclass DBDA{ public $host="localhost";//服务器地址 public $uid="root";//用户名 pu ...

  3. Junit4学习（六）Junit4参数化设置

    一,背景, 有时候会对相同的代码结构做同样的操作,不同的时对参数的设置数据和预期结果:有没有好的办法提取出来相同的代码,提高代码的可重用度,junit4中使用参数化设置,来处理此种场景: 二,代码展示 ...

  4. Srping - bean的依赖注入（Dependency injection）

    目录 1 概述 2 两种基本的依赖注入方式 2.1 构造函数方式 2.2Setter方式 3 其他依赖注入功能 3.1 <ref/>标签引用不同范围的bean 3.2 内部bean 3.3 ...

  5. 01_ExtJS_HelloWorld

    1, 什么是Ext? Ext是一个Ajax框架,用于在客户端创建丰富多彩的web应用程序界面,是在Yahoo! UI的基础上发展而来的.官方网址:http://www.extjs.com/ 现在改为: ...

  6. response对象的使用

    使用response对象提供的sendRedirect()方法可以将网页重定向到另一个页面.重定向操作支持将地址重定向到不同的主机上,这一点与转发是不同的.在客户端浏览器上将会得到跳转地址,并重新发送 ...

  7. 【框架学习与探究之定时器--Quartz.Net 】

    声明 本文欢迎转载,原文地址:http://www.cnblogs.com/DjlNet/p/7572174.html 前言 这里相信大部分玩家之前现在都应该有过使用定时器的时候或者需求,例如什么定时 ...

  8. 外设位宽为8、16、32时，CPU与外设之间地址线的连接方法

    有不少人问到:flash连接CPU时,根据不同的数据宽度,比如16位的NOR FLASH (A0-A19),处理器的地址线要(A1-A20)左移偏1位.为什么要偏1位? (全文有点晦涩,建议收藏本文对 ...

  9. 读Zepto源码之IOS3模块

    IOS3 模块是针对 IOS 的兼容模块,实现了两个常用方法的兼容,这两个方法分别是 trim 和 reduce . 读 Zepto 源码系列文章已经放到了github上,欢迎star: readin ...

  10. 基于MyBatis3.0.6的基本操作介绍

    每 一 个 MyBatis 的 应 用 程 序 都 以 一 个 SqlSessionFactory 对 象 的 实 例 为 核 心 .SqlSessionFactory本身是由SqlSessionFa ...