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. 使用事件和 CQRS 重写 CRUD 系统

    使用事件和 CQRS 重写 CRUD 系统 https://msdn.microsoft.com/zh-cn/magazine/mt790196.aspx https://github.com/mem ...

  2. java设计思想-池化-手写数据库连接池

     https://blog.csdn.net/qq_16038125/article/details/80180941 池:同一类对象集合 连接池的作用 1. 资源重用 由于数据库连接得到重用,避免了 ...

  3. VMware和Centos安装

    1.Windows,VMware和Centos三者的关系 2.VMware安装 下载好之后一直下一步安装,很简单 3.Centos安装 打开VMware,点击创建新的虚拟机  选择自定义,然后点下一步 ...

  4. 大数据之路【第十二篇】:数据挖掘--NLP文本相似度

    一.词频----TF • 假设:如果一个词很重要,应该会在文章中多次出现 • 词频——TF(Term Frequency):一个词在文章中出现的次数 • 也不是绝对的!出现次数最多的是“的”“是”“在 ...

  5. 第二周、ubuntu的简单介绍与使用

    一.复习第一周的大致内容:1.UNIX与Linux.ubuntu系统UNIX是1971年贝尔实验室的肯·汤普逊.丹尼斯·里奇,合作研发一款通过的操作系统,多用户.多任务.安全.稳定,收费.Linux是 ...

  6. PostgreSQL学习笔记(一)—— macOS下安装

    安装命令:brew install postgresql 我的终端是zsh,所以添加环境变量到~/.zshrc vim ~/.zshrc export PATH=$PATH:/usr/local/Ce ...

  7. CentOS7安装rabbitmq集群(二进制)

    一.RabbiMQ简介 RabbiMQ是用Erang开发的,集群非常方便,因为Erlang天生就是一门分布式语言,但其本身并不支持负载均衡. RabbiMQ模式 RabbitMQ模式大概分为以下三种: ...

  8. TCP协议学习笔记

    TCP协议数据格式 TCP协议在互联网ISO协议的传输层. 在互联网传输过程中,互联网包在数据链路层,是传输数据的最基础的包.一个互联网的包包含IP包,即互联网包 = 互联网信息包头(至少20字节)+ ...

  9. nacos初探--作为配置中心

    什么是nacos Nacos 支持基于 DNS 和基于 RPC 的服务发现(可以作为springcloud的注册中心).动态配置服务(可以做配置中心).动态 DNS 服务. 官方介绍是这样的: Nac ...

  10. mongoDB对没有字段的记录新增字段

    db.getCollection('ClassRecordOneDetail').updateMany({'synState':{'$exists':false}},{'$set':{'synStat ...