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. Python 求最大公因式~辗转相除法

    从错误中学python(4)——最小公约数与辗转相除法 网上看到一篇很简洁辗转相除法的写法:不用判断a,b的大小 def gcp(a, b): while(b%a!=0): a,b=b%a,a ret ...

  2. error LNK2026: 模块对于 SAFESEH 映像是不安全的（转）

    原文转自 http://www.cnblogs.com/hanxi/archive/2012/06/10/2544230.html 今天使用VS2012遇到一个问题:"链接器工具错误 LNK ...

  3. MFC 菜单操作

    在CMainFrame中OnCreate函数中添加下列:(注意在return(0)前添加) 在文件,新建前打钩 法1: GetMenu()->GetSubMenu(0)->CheckMen ...

  4. 基于UDT connect连接通信以及文件传输--服务端

    网上与UDT相关的资料不多,与UDT相关的源码例子更少.最近在接触UDT,也是因为缺少相关的资料,导致学习起来甚感痛苦.下面将我自己这两天弄出来的代码贴出来,希望对在寻找相关资料的童鞋有一定的帮助.与 ...

  5. Centos7一键安装lnmp脚本

    mkdir /root/softwarewget http://mirrors.sohu.com/mysql/MySQL-5.7/mysql-boost-5.7.18.tar.gzwget https ...

  6. Centos查看文件夹大小

    查看当前目录下文件夹大小 du -h --max-depth=1 查看整体情况 df -h

  7. 通栏导航栏的制作，综合使用CSS属性，代码不超过30行

    这篇文章,小编带领大家一同做一个利用CSS技术实现的导航栏.通过这个导航栏的制作,希望大家能够对前几篇文章中学习到的CSS属性能有一个整体的认识,并能够达到灵活运用的程度. 承接文章:灵活控制块级元素 ...

  8. 51nod 1007 正整数分组【01背包变形】

    1007 正整数分组 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题  收藏  关注 将一堆正整数分为2组,要求2组的和相差最小. 例如:1 2 3 4 5,将1 ...

  9. Unity防破解 —— 加密Dll与Key保护

        在阅读这篇文章之前,我在处理mono加密问题时,也是参考了雨凇的文章,所以建议先看一下雨凇写的关于加密Dll的文章: 1.Unity3D研究院之Android加密DLL与破解DLL .SO 2 ...

  10. JQuery里面的下啦菜单

    <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...