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

    1. 本周学习总结 1.1 以你喜欢式(思维导图或其他)归纳总结多数据库相关内容. 1.数据库的定义:是为了实现一定目的按某种规则组织起来的"数据"的"集合". ...

  2. 201521145042《Java程序设计》第14周学习总结

    MySql操作视频与数据库相关jar文件请参考QQ群文件. 本次作业参考文件 数据库PPT 0. 本周课程设计发布 Java课程设计 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总 ...

  3. java第十三次作业

    1. 本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相内关容. 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu ...

  4. Markdown例

    一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...

  5. weblogic-部署web应用

    1, weblogic 安装介质的获取: oracle 官方weblogic下载 :   http://www.oracle.com/technetwork/middleware/weblogic/d ...

  6. XML-为XML添加DTD-Schema方法

    以后都按照如下方式为XML添加dtd或者schema 1,一般从源码jar包里找dtd文件,拷贝到自己的本地目录中: 比如mybatis在如下目录中有dtd :~/ mybatis-3.2.2-sou ...

  7. mysql数据库-初始化sql建库建表-关联查询投影问题

    下面是一个简易商城的几张表的创建方式 drop database if exists shop ; create database shop CHARACTER SET 'utf8' COLLATE ...

  8. Python跨目录调用模块

    目的就是将脚本执行的根目录加入环境变量. #!/usr/bin/env python3 # -*- coding: utf-8 -*- __author__ = '人生入戏' import os,sy ...

  9. 支持语音识别、自然语言理解的微信小程序（“遥知之”智能小秘）完整源码分享

    记录自己搭建https的silk录音文件语音识别服务的调用过程,所有代码可在文中找链接打包下载 >>>>>>>>>>>>> ...

  10. 【BBED】BBED模拟并修复ORA-08102错误

    [BBED]BBED模拟并修复ORA-08102错误 1.1  BLOG文档结构图 1.2  前言部分 1.2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其 ...