浏览器 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存储更加安全和高速.数据不再包括 ...
随机推荐
- 2017ACM/ICPC广西邀请赛 Color it
Color it Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 132768/132768 K (Java/Others)Tota ...
- mongodb4.2.2 centos 单机安装
下载 rpm包 wget https://repo.mongodb.org/yum/redhat/7/mongodb-org/4.2/x86_64/RPMS/mongodb-org-server-4. ...
- Linux Docker Introduction
Setup on Ubuntu. 前提条件: Docker需要两个重要的安装要求: 它仅适用于64位Linux安装,注意:是64位的Linux系统. 它需要Linux内核版本3.10或更高版本. 要查 ...
- Mesh网格简化
Mesh简化算法: 1. 通过mesh简化,可以将一个多边形的网格A转化成另一个网格B 网格B相比A,有更少的三角形面.边.顶点. 2. 简化的过程是受到一定的约束的.会有一系列自定义的质量标准来控制 ...
- go标准库I/O模型:epoll+多协程
本文为linux环境下的总结,其他操作系统本质差别不大.本地文件I/O和网络I/O逻辑类似. epoll+多线程的模型 epoll+多线程模型和epoll 单进程区别.优点 对比于redis这 ...
- Android Studio中设置与Eclipse中 Ctrl+1 功能类似的快捷键
Eclipse:Ctrl + 1 Android Studio: Alt + Enter 1. 首先当然是打开设置窗口啦,然后在IDE Settings 下找到Keymap 2. 在Keymap的搜索 ...
- U9期间在手量控制
1.路径 库存管理->参数控制 2.设置节点 期间在手量控制时机 :单据实时控制.日关账控制.不控制 3.实现效果
- git 学习笔记 ---解决冲突
人生不如意之事十之八九,合并分支往往也不是一帆风顺的. 准备新的feature1分支,继续我们的新分支开发: $ git checkout -b feature1 Switched to a new ...
- JavaScript前端和Java后端的AES加密和解密(转)
在实际开发项目中,有些数据在前后端的传输过程中需要进行加密,那就需要保证前端和后端的加解密需要统一.这里给大家简单演示AES在JavaScript前端和Java后端是如何实现加密和解密的. java端 ...
- 执行kubectl create-f replicaset.yaml后k8s是如何工作的
参考:提高 kubectl 使用生产力[译] 英文原文:https://learnk8s.io/blog/kubectl-productivity/ Kubernetes 架构 Kubernetes ...