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. cube-ui 重构饿了吗Webapp的 scroll-nav域名插槽问题

    Vue2.6 将 slot-scope 废弃了. 推荐使用 v-slot: 其使用方法大致如下: 注意多个插槽的情况下,最好都基于 <template> default插槽用法还是一样的, ...

  2. mysql8.0 grant 创建账号及权限记录

    针对 42000错误 原文:https://stackoverflow.com/questions/50177216/how-to-grant-all-privileges-to-root-user- ...

  3. 创建企业级地理数据库报错:ORA-01455

    环境: Oracle Server : 11.2.0.3 (x64) Oracle Client  : 11.1.0.6 (x32) Arcgis Desktop : 10.3 在该环境下执行 &qu ...

  4. strace调试工具编译移植

     源码下载:https://github.com/strace/strace/releases/tag/v4.18(使用的较老版本,最新版 5.4 编译时依赖较多,最终博主放弃使用) [ 编译步骤 ] ...

  5. 【记录】【MySQL】拼接字符串函数 CONCAT(str1,str2)

    CONCAT(str1,str2) 就是把str1和str2拼接

  6. 在ensp上配置RIPv2的认证

    原理 实验模拟 实验拓扑 测试连通性 搭建rip网络 查看路由表 R3模拟攻击首先把在自己的的ip通告网段 配置完成后查看一下路由表 可以看到已经非法获取R1R2的网段信息,那么现在我们R3可以向两个 ...

  7. BJFU—214基于链式存储结构的图书信息表的创建和输出

    #include<stdio.h>#include<stdlib.h>#define MAX 100 typedef struct bNode{ double no; char ...

  8. golang(一)

    开篇先来个Go语言的吉祥物-金花鼠Gordon. golang是谷歌2009年发布的开源编程语言,截止目前go的release版本已经到了1.10.go语言的开发人员都是计算机界大神一般的存在: Th ...

  9. Gin上传文件到MongoDB gridfs

    目录 上传图片 下载图片 上传图片 func imagePost(c *gin.Context) { image, err := c.FormFile("file") if err ...

  10. 【Linux】Ubuntu修改root用户密码

    使用vmware安装ubuntu的时候,安装完之后发现没有root用户密码,只有新建用户,这个时候需要重新设置root用户密码 在新建用户下面运行 sudo passwd root