浏览器 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存储更加安全和高速.数据不再包括 ...
随机推荐
- nginx配置优化提高并发量
1 nginx配置优化提高并发量 worker_processes 2; 这个按照CPU的核数来决定 2 worker_connections 65535; 这个一般设置65535即可 每个进程允许的 ...
- Vue(九)使用Ant Design入门——环境搭建
安装 npm install ant-design-vue --save 然后在main.js里面引入 import ant from 'ant-design-vue' import 'ant-des ...
- 手撕面试官系列(十一):BAT面试必备之常问85题
JVM专题 (面试题+答案领取方式见侧边栏) Java 类加载过程? 描述一下 JVM 加载 Class 文件的原理机制? Java 内存分配. GC 是什么? 为什么要有 GC? 简述 Java ...
- 6. 运行Spark SQL CLI
Spark SQL CLI可以很方便的在本地运行Hive元数据服务以及从命令行执行任务查询.需要注意的是,Spark SQL CLI不能与Thrift JDBC服务交互.在Spark目录下执行如下命令 ...
- 【实战经验】STM32烧录
1.编译 2.配置烧录工具 2.配置烧录工具 3.配置烧录工具(一般街上Jlink就能检测到对应的STM32芯片) 5.选择FLASH 4.烧录 5.烧录完成
- Spring AOP 创建Advice 定义pointcut、advisor
前面定义的advice都是直接植入到代理接口的执行之前和之后,或者在异常发生时,事实上,还可以对植入的时机定义的更细. Pointcut定义了advice的应用时机,在Spring中pointcutA ...
- 阿里巴巴 Java 开发手册 (十二)安全规约
1. [强制]隶属于用户个人的页面或者功能必须进行权限控制校验. 说明:防止没有做水平权限校验就可随意访问.修改.删除别人的数据,比如查看他人的私信 内容.修改他人的订单. 2. [强制]用户敏感数据 ...
- vue 异步渲染
<!DOCTYPE html> <html> <head> <title> hello world vue </title> <met ...
- State Design Pattern
注: 转载自 https://www.geeksforgeeks.org/state-design-pattern/ [以便查阅,非原创] State Design Pattern State pa ...
- android studio中为gradle指定cmake版本
Android Studio相当于是Intellij基础上写了一个AS插件,这个插件使用gradle作为构建系统,因此构建出现问题先考虑gradle的文档. gradle可以使用native buil ...