浏览器 Web Storage - sessionStorage & localStorage
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的更多相关文章
- HTML5中的Web Storage(sessionStorage||localStorage)理解与简单实例
Web Storage是什么? Web Storage功能,顾名思义,就是在Web上针对client本地储存数据的功能,详细来说Web Storage分为两种: sessionStorage: 将数据 ...
- html5 Web Storage(localStorage(),sessionStorage())
Web Storage包括了两种存储方式:sessionStorage和localStorage sessionStorage 是会话级别的存储,这些数据只有在同一个会话中的页面才能访问并且当会话结束 ...
- H5的storage(sessionstorage&localStorage)简单存储删除
众所周知,H5的storage有sessionstorage&localStorage,其中他们的共同特点是API相同 下面直接上代码,storage中的存储与删除: <!DOCTYPE ...
- HTML5存储 ——Web Storage(localStorage 和 sessionStorage)
一.localStorage对象临时储存API 方法: 1.localStorage.setItem(key,value)---设置存储内容 2.localStorage.getItem(key)-- ...
- web storage: sessionStorage 和 localStorage
// sessionStorage.setItem("message",str);function saveStorage(id){ var target = document.g ...
- Vue.js Client-Side Storage;( Web Storage/localStorage)
原文:https://cn.vuejs.org/v2/cookbook/client-side-storage.html LocalStorage (api) my code pen :https:/ ...
- web storage和cookie的区别
Web Storage的概念和cookie相似,区别是它是为了更大容量存储设计的.Cookie的大小是受限的,并且每次你请求一个新的页面的时候Cookie都会被发送过去,这样无形中浪费了带宽,另外co ...
- 数据存储之Cookie和Web Storage。
Cookie Cookie,有时也用其复数形式Cookies,指某些网站为了辨别用户身份.进行session跟踪而储存在用户本地终端上的数据(通常经过加密).接下来就谈谈cookie的一些利弊,coo ...
- HTML5之WEB Storage
什么是HTML5 web storage? 使用HTML5,web页面能够使用用户的浏览器本地保存数据. 在曾经,通常我们使用cookie来保存用户数据.然而使用web存储更加安全和高速.数据不再包括 ...
随机推荐
- 局域网-断网&劫持(kali)
1.查看局域网中的主机 fping –asg 192.168.1.0/24 2.断网 arpspoof -i wlan0 -t 192.168.100 192.168.1.1 (arpspoof - ...
- jquery预加载显示百分比
jquery预加载显示百分比 <pre> <img class="bj loadimg" loadimg="/weiqingshu/images/1/b ...
- 对decimal 类型的数据进行获取调整
Decimal为SQL Server.MySql等数据库的一种数据类型,不属于浮点数类型,可以在定义时划定整数部分以及小数部分的位数. 好处:使用精确小数类型不仅能够保证数据计算更为精确,还可以节省储 ...
- Shadowing of static functions in Java
class A { static void fun() { System.out.println("A.fun()"); } } class B extends A { stati ...
- 关于一致性hash,这可能是全网最形象生动最容易理解的文档,想做架构师的你来了解一下
问题提出 一致性hash是什么?假设有4台缓存服务器N0,N1,N2,N3,现在需要存储数据OBJECT1,OBJECT2,OBJECT3,OBJECT4,OBJECT5,OBJECT5,OBJECT ...
- maven安装配置 每次都百度,麻烦
JDK已经安装 1. 下载:https://maven.apache.org/download.cgi 2. 解压 D:\Program Files\maven 配置环境变量 新建环境变量MAVEN ...
- 30个关于Shell脚本的经典案例(下)
本文目录 21.从FTP服务器下载文件 22.连续输入5个100以内的数字,统计和.最小和最大 23.将结果分别赋值给变量 24.批量修改文件名 25.统计当前目录中以.html结尾的文件总大 26. ...
- 学习笔记之编程珠玑 Programming Pearls
Programming Pearls (2nd Edition): Jon Bentley: 0785342657883: Amazon.com: Books https://www.amazon.c ...
- JAVA基础之事务
世界万事无简单一说, 每个事情基本上由多个小的事情来完成.有的事情会存在若小的事情不能同时完成的情况就取消所有的小的事情,直至都完成达到预期的效果才算完成!这样就用到了事务操作.在所有的sql语句完成 ...
- Building Objective-C static libraries with categories
Q: How do I fix "selector not recognized" runtime exceptions when trying to use category m ...