storage事件

当储存的数据发生变化时,会触发storage事件。我们可以指定这个事件的回调函数。

window.addEventListener("storage",onStorageChange);

function onStorageChange(e) {
console.log(e.key); //还有e.oldValue,e.newValue,e.url属性
}

值得特别注意的是,该事件不在导致数据变化的当前页面触发。如果浏览器同时打开一个域名下面的多个页面,当其中的一个页面改变sessionStorage或localStorage的数据时,其他所有页面的storage事件会被触发,而原始页面并不触发storage事件。可以通过这种机制,实现多个窗口之间的通信。所有浏览器之中,只有IE浏览器除外,它会在所有页面触发storage事件。

参考

  Web Storage:浏览器端数据存储机制,阮一峰 http://javascript.ruanyifeng.com/bom/webstorage.html

浏览器 Web Storage - sessionStorage & localStorage的更多相关文章

  1. HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例

    Web Storage是什么? Web Storage功能,顾名思义,就是在Web上针对client本地储存数据的功能,详细来说Web Storage分为两种: sessionStorage: 将数据 ...

  2. html5 Web Storage(localStorage(),sessionStorage())

    Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...

  3. H5的storage(sessionstorage&localStorage)简单存储删除

    众所周知,H5的storage有sessionstorage&localStorage,其中他们的共同特点是API相同 下面直接上代码,storage中的存储与删除: <!DOCTYPE ...

  4. HTML5存储 ——Web Storage(localStorage 和 sessionStorage)

    一.localStorage对象临时储存API 方法: 1.localStorage.setItem(key,value)---设置存储内容 2.localStorage.getItem(key)-- ...

  5. web storage: sessionStorage 和 localStorage

    // sessionStorage.setItem("message",str);function saveStorage(id){ var target = document.g ...

  6. Vue.js Client-Side Storage;( Web Storage/localStorage)

    原文:https://cn.vuejs.org/v2/cookbook/client-side-storage.html LocalStorage (api) my code pen :https:/ ...

  7. web storage和cookie的区别

    Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的.Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外co ...

  8. 数据存储之Cookie和Web Storage。

    Cookie Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).接下来就谈谈cookie的一些利弊,coo ...

  9. HTML5之WEB Storage

    什么是HTML5 web storage? 使用HTML5,web页面能够使用用户的浏览器本地保存数据. 在曾经,通常我们使用cookie来保存用户数据.然而使用web存储更加安全和高速.数据不再包括 ...

随机推荐

  1. WIFI-Direct(Wifi直连)、AirPlay、DLAN、Miracast功能介绍

    不知道大家对无线同屏技术有多少了解,当这种技术普及的时候,我想我们的工作与生活又会方便很多吧!下面是目前三种主流同屏技术的介绍: 目前这种将终端信号经由WiFi传输到电视.电视盒的技术有三种:DLNA ...

  2. Spring boot + mybatis + mysql代码生成器

    引入依赖: 在pom文件最下边: <build> <plugins> <!--逆向工程--> <plugin> <groupId>org.m ...

  3. C指针的一些小细节

    1  int *c;*c=4-->int *c;int b;c=&b;*c=4; 在使用指针之前,一定要将其初始化,当然,如果是赋予一个地址,就相当于使用的同时就进行了初始化.

  4. Linux基础(06)IO复用

    在Windows文件指的就是普通的肉眼可见的文件 , 而Linux一切皆文件 https://blog.csdn.net/nan_nan_nan_nan_nan/article/details/812 ...

  5. SAS学习笔记1

    数据采样 简单随机抽样,从sashelp数据集中air数据文件中选取30个数 数据探索 数字特征的探索:均值.频数.最大值.最小值.众数.中位数.方差.标准差 数字分布的探索:是否服从正态分布 连续型 ...

  6. 矩阵优化DP类问题应用向小结

    前言 本篇强调应用,矩阵的基本知识有所省略(也许会写篇基础向...). 思想及原理 为什么Oier们能够想到用矩阵来加速DP呢?做了一些DP题之后,我们会发现,有时候DP两两状态之间的转移是定向的,也 ...

  7. Java自学-数组 复制数组

    Java 如何复制数组 数组的长度是不可变的,一旦分配好空间,是多长,就多长,不能增加也不能减少 步骤 1 : 复制数组 把一个数组的值,复制到另一个数组中 System.arraycopy(src, ...

  8. head 与 tail

    head head [-n] 数字『文件』 显示前面n行 例如 head -n 3 test 显示 test 文件的前 3 行,也可以写作 head -3 test 比较有趣的是 -n 后面的数字,可 ...

  9. 微信小程序代码开源啦

    想学习如何使用mpvue开发微信小程序吗? 想知道微信消息推送如何实现吗? 想知道如何用springboot开发小程序后台吗? 看这里就全都有了.耗时一个月打造的微信小程序:PSN折扣助手前后端所有源 ...

  10. JavaWeb 之 BeanUtils 工具类

    在上一个用户登录案例中,当从浏览器接收参数后,还需要创建 JavaBean 类,对其的属性每一项赋值,如果属性少,可以手动完成,但是当属性非常多,这时就发现非常不方便,在这里提供一个可以封装 Java ...