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. 【CString与string转换】不存在从 "LPWSTR" 转换到 "std::basic_string<char, std::char_traits<char>, std::allocator（转）

    原文转自 http://blog.csdn.net/qq_23536063/article/details/52291332 [问题描述] CString cstr: sring str(cstr.G ...

  2. OS X升级到10.10之后使用pod出现问题的解决方法

     http://blog.csdn.net/dqjyong/article/details/37958067 OS X升级到10.10之后使用pod出现问题的解决方法 分类: IOS2014-07-1 ...

  3. 多线程之：java线程创建

    java中创建线程有两种方式: 1.继承Thread类,重写run()方法,如: public class MyThread extends Thread { public void run(){ S ...

  4. UVA 1589:Xiangqi (模拟 Grade D)

    题目: 象棋,黑棋只有将,红棋有帅车马炮.问是否死将. 思路: 对方将四个方向走一步,看看会不会被吃. 代码: 很难看……WA了很多发,还越界等等. #include <cstdio> # ...

  5. 【原创】DQS安装失败——系统重新引导是否处于挂起状态

    问题:         安装完SQL Server 2012后,准备安装DQS服务,但是总是提示:操作“检查系统重新引导是否处于挂起状态”已完成,但有错误,正在中止安装.非常无奈,因为都根据其要求重启 ...

  6. （2）新概念英语一（1-10）lessons

    一共105个单词 lesson1 lesson2 lesson3 lesson4 lesson5 lesson6 lesson7 lesson8 lesson9 lesson10

  7. LCA【p2912】 牧场散步 (USACO08OCT)

    顾z 你没有发现两个字里的blog都不一样嘛 qwq 题目描述-->p2912 牧场散步 题意概括 给定一个树,给你Q个询问,每次询问输入一个二元组\((x,y)\),要求求出\((x,y)\) ...

  8. Linq 连接运算符：Concat,Union

    //Concat()方法附加两个相同类型的序列,并返回一个新序列(集合)IList<string> strList = new List<string>() { "O ...

  9. Shellcode开发辅助工具shellnoob

    Shellcode开发辅助工具shellnoob   Shellcode开发的过程中会遇到很多繁杂的工作,如编译.反编译.调试等.为了减少这部分工作,Kali Linux提供了开发辅助工具shelln ...

  10. 2，搭建一个java开发环境

    (1)java开发需要的条件? 1)适用于环境开发的jdk(里面包括了jre和加热里面包括了jvm) 2)对应开发环境的eclipse 3)如果涉及到web开发,还需要web服务器(Tomcat) ( ...