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. .Net Core 3 骚操作 之 用 Windows 桌面应用开发 Asp.Net Core 网站

    前言 曾经在开发 Asp.Net 网站时就在想,为什么一定要把网站挂到 IIS 上?网站项目的 Main 函数哪儿去了?后来才知道这个 Main 函数在 w3wp.exe 里,这也是 IIS 的主进程 ...

  2. 【问题】Could not locate PropertySource and the fail fast property is set, failing

    这是我遇到的问题 Could not locate PropertySource and the fail fast property is set, failing springcloud的其他服务 ...

  3. Flask源码之:配置加载

    加载配置文件的思路: 1. 读取配置文件中的所有键值对,并将键值对全都放到Config对象.(Config是一个字典,因为它继承了Dict) 2. 把包含所有配置文件的Config对象,赋值给 app ...

  4. go语言浅析二叉树

    Hello,各位小伙伴大家好,我是小栈君,今天给大家带来的分享是关于关于二叉树相关的知识点,并用go语言实现一个二叉树和对二叉树进行遍历. 我们主要针对二叉树的概念,go实战实现二叉树的前序遍历.中序 ...

  5. java知识精要(二)

    java知识精要(一) 集合 Iterable v.s. Iterator 两者都是接口,在Collection继承的是Iterable. Iterable表达了集合具备迭代访问的能力,而Iterat ...

  6. ASP.NET SignalR 系列(三)之代码实现

    说在前头: 因SignalR默认采用camel的编码规范,故前端调用后端的对象或者方法时,首字母均需要小写 创建集线器 创建完,文件中默认创建了一个不带参数Hello方法的示例,我们修改一下,带个参数 ...

  7. 2019 快乐阳光java面试笔试题 (含面试题解析)

    本人3年开发经验.18年年底开始跑路找工作,在互联网寒冬下成功拿到阿里巴巴.今日头条.快乐阳光等公司offer,岗位是Java后端开发,最终选择去了快乐阳光. 面试了很多家公司,感觉大部分公司考察的点 ...

  8. Mac android studio真机调试步骤

    Mac android studio真机调试步骤 这些步骤是在百度中查找的,当时记录下来了,过了个把月了,今天写出来,我也重温步骤. 1.找到android的SDK路径,一般是 /user/你的电脑名 ...

  9. Oracle数据库之初识部分知识

    Oracle是比MySql更为严格的数据库.使用时需要更加严谨. 一.安装注意事项: 1.选择地址时需要注意好不能有汉字,以免造成安装的时候注册表显示监听失败: 2.可视化窗口PLSQL编辑器(相当于 ...

  10. Doctype作用,标准模式与兼容模式的区别

    <!DOCTYPE>声明位于位于HTML文档中的第一行,处于 <html> 标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCTYPE不存在或格式不正确会导致文档以 ...