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

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

  2. 201521123040《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...

  3. 201521123003《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) ...

  4. 201521123049 《JAVA程序设计》 第14周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多数据库相关内容. 2. 书面作业 1. MySQL数据库基本操作 建立数据库,将自己的姓名.学号作为一条记录插入.(截图,需出现自 ...

  5. NativeScript官方书籍：NativeScript-用你现有技术构建移动应用程序

    大家好,我用nativescript做企业级移动应用开发一年多了.从最初只能看nativescript英文文档,到现在看到官方发布正式的书籍,感觉nativescript变得越来越好. 当然,在这个过 ...

  6. java 数组内的最大组合数

    给定一个任意长度的java数组,求数组内的数能组合出来的最大整数比如说{9,98,123,32} 最大就是 99832123 import java.util.Arrays; import java. ...

  7. Java数据库连接泄漏应对办法-基于Weblogic服务器

    临时解决连接泄漏方案 当连接泄漏真的发生了,无可避免时,我们采取以下方案,可临时解决连接问题,以争取修改代码的时间. 步骤1:选择待分析的JNDI数据源 步骤2(可选):可配置最大数据连接数量 步骤3 ...

  8. 西邮linux兴趣小组2014纳新免试题（二）

    [第二关] 题目 http://round2.sinaapp.com/ 分析 打开后,戳进去发现一句名言,然后下一戳的url提示. 在网页源码中得到Page1024提示,于是写一个脚本 #!/bin/ ...

  9. C语言bitmap的使用技巧

    bitmap是一种以位的状态来表示某种特性的状态的一种操作方式,类似嵌入式中的寄存器操作,在表示某种特性enable/disable的时候很适用且占用的内存空间也很小 比如:做过交换机或者企业网管,路 ...

  10. 《Go in action》读后记录：Go的并发与并行

    本文的主要内容是: 了解goroutine,使用它来运行程序 了解Go是如何检测并修正竞争状态的(解决资源互斥访问的方式) 了解并使用通道chan来同步goroutine 一.使用goroutine来 ...