1、概述

https://developer.mozilla.org/en-US/docs/Web/Events/storage

localStorage 或者sessionStorage存储的数据发生时会触发storage事件。

2、示例

示例中会展示所有的storage事件属性值。

A文件：

<!DOCTYPE html>

<html lang="zh">

    <head>

        <meta charset="UTF-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1.0" />

        <meta http-equiv="X-UA-Compatible" content="ie=edge" />

        <title>Document</title>

    </head>

    <body>

        <script type="text/javascript">

            window.addEventListener("storage", function(e) {

                //事件目标 输出：[object Window]对象（因为绑定在window上）

                console.log("target: "+e.target);

                //事件类型 输出：storage

                console.log("type : "+e.type);

                //事件是否冒泡 输出：false

                console.log("bubbles : "+e.bubbles);

                //事件是否可撤销 输出：false

                console.log("tarcancelable: "+e.cancelable);

                //键名

                console.log("key: "+e.key);

                //键值原值

                console.log("oldValue: "+e.oldValue);

                //键值新值

                console.log("newValue: "+e.newValue);

                //触发事件的url

                console.log("url: "+e.url);

                //受影响的存储空间 输出[object Storage]

                console.log("storageArea: "+e.storageArea);

            });

        </script>

    </body>

</html>

B文件：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <script type="text/javascript">

            localStorage.clear();

            localStorage.setItem('foo', 'bar');

        </script>

    </body>

</html>

操作：先打开A页面，后打开B页面。

B页面控制台输入：

storage事件效果：

storage事件 js页面间通信的更多相关文章

  1. js页面间通信方法（storage事件）（浏览器页面间通信方法）

    在写页面的时候有时会遇到这样的需求,需要两个页面之间传递数据或者一个事件.这个时候,就需要用到我今天所要讲的storage事件,学习这个事件之前,需要先了解localStorage的用法.具体用法可以 ...

  2. js 页面间的通信

    看了一下公司原来的代码,原页面ajax post返回一个页面完整的HTML,然后再打开一个新页面并输出ajax返回的所有代码到新页面上,在新页面上以表单提交的形式实现重定向. 任凭我想了半天也没想出来 ...

  3. [转] 微信小程序页面间通信的5种方式

    微信小程序页面间通的5种方式 PageModel(页面模型)对小程序而言是很重要的一个概念,从app.json中也可以看到,小程序就是由一个个页面组成的. 如上图,这是一个常见结构的小程序:首页是一个 ...

  4. UWP开源项目 LLQNotifier 页面间通信利器（移植EventBus）

    前言 EventBus是一个Android版本的页面间通信库,这个库让页面间的通信变得十分容易且大幅降低了页面之间的耦合.小弟之前玩Android的时候就用得十分顺手,现在玩uwp就觉得应该在这平台也 ...

  5. JavaScript之iframe页面间通信

    [1] iframe父子页面间通信 1.相互调用对方的方法 |> 子级页面调用父级页面 window.parent.父级页面方法(args) |> 父级页面调用子级页面 document. ...

  6. 如何实现electron多页面间通信

    如何实现electron多页面间通信 1,业务需求: 总共有两个页面,页面A显示数据,页面B处理数据,主线程Main 2,实现的技术方案: 在主线程中打开页面A和B,B页面不进行显示,主要负责处理从A ...

  7. 聊聊Vue.js组件间通信的几种姿势

    写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:https://github.com/a ...

  8. Prism for WPF再探（基于Prism事件的模块间通信）

    上篇博文链接 Prism for WPF初探(构建简单的模块化开发框架) 一.简单介绍: 在上一篇博文中初步搭建了Prism框架的各个模块,但那只是搭建了一个空壳,里面的内容基本是空的,在这一篇我将实 ...

  9. MUI+html5+javascript 点击事件触发页面间传值

    关于如何进行页面转跳,请看 https://www.cnblogs.com/JUNELITTLEPANDA/p/15956176.html,以下跳转方法是采用的其中一种 1-  仅适用于移动端,pc端 ...

随机推荐

  1. Easy Install详细参数

    Easy Install Easy Install is a python module (easy_install) bundled with setuptools that lets you au ...

  2. Java异常throws与throw的区别

    throws关键字通常被应用在声明方法时,用来指定可能抛出的异常.多个异常可以使用逗号隔开.当在主函数中调用该方法时,如果发生异常,就会将异常抛给指定异常对象.谁调用谁处理: 抛出异常throws: ...

  3. hdu 2461(AC) & poj 3695(TLE)(离散化+矩形并)

    Rectangles Time Limit: 5000/4000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total ...

  4. spring boot的pom.xml配置，正确生成jar包

    spring boot生成的jar包提示没有主清单属性. 需要在pom里加入配置. <?xml version="1.0" encoding="UTF-8" ...

  5. js-offsetX、pageX、clientX、layerX、screenX

    真心地我也是懵逼的 clientX,clientY:针对屏幕有效区域,不包括滚动部分,坐标(0,0)一直在有效区域的左上角 X,Y:            针对屏幕有效区域,不包括滚动部分,坐标(0, ...

  6. Python的程序结构[7] -> 生成器/Generator -> 生成器浅析

    生成器 / Generator 目录 关于生成器 生成器与迭代器 生成器的建立 通过迭代生成器获取值 生成器的 close 方法 生成器的 send 方法 生成器的 throw 方法 空生成器的检测方 ...

  7. Xamarin.Android真机测试提示[INSTALL_FAILED_UPDATE_INCOMPATIBLE]

    Xamarin.Android真机测试提示[INSTALL_FAILED_UPDATE_INCOMPATIBLE]   使用真机测试的时候,出现以下错误提示:   Deployment failed ...

  8. CV2

    Education 2008-09 - 2012-07  Xian Peihua University English  Junior CollegeTarget Jobs:  Project Man ...

  9. 阿里云ECS在CentOS 6.9中使用Nginx提示：nginx: [emerg] socket() [::]:80 failed (97: Address family not supported by protocol)的解决方法

    说明: 1.[::]:80这个是IPv6的地址. 2.阿里云截至到今天还不支持IPv6. 解决方式: 1.普通解决方式:开启IPv6的支持,不过这个方法在阿里云行不通. vim /etc/nginx/ ...

  10. source insight研究——快捷键篇

    转:http://blog.csdn.net/ison81/article/details/3510426 关于键盘和鼠标谁更快捷之争,是一个永远被程序员争论的话题.我想大多数人都不会极端的信奉一种操 ...