html5客户端本地存储之sessionStorage及storage事件_storage事件 html5-程序员宅基地

技术标签: html5  

sessionStorage和localStorage非常相似,方法也几乎一样:

非常通俗易懂的接口:

  • sessionStorage.getItem(key):获取指定key本地存储的值
  • sessionStorage.setItem(key,value):将value存储到key字段
  • sessionStorage.removeItem(key):删除指定key本地存储的值
  • sessionStorage.length是sessionStorage的项目数


直接上demo:http://www.css88.com/demo/sessionStorage/

sessionStorage与 localStorage 的异同

sessionStorage 和 localStorage 就一个不同的地方, sessionStorage数据的存储仅特定于某个会话中,也就是说数据只保持到浏览器关闭,当浏览器关闭后重新打开这个页面时, 之前的存储已经被清除。而 localStorage 是一个持久化的存储,它并不局限于会话。

sessionStorage和localStorage提供的key()和length可以方便的实现存储的数据遍历,例如下面的代码:

var storage = window.localStorage;
	for (var i=0, len = storage.length; i < len; i++){
	var key = storage.key(i);
	var value = storage.getItem(key);
	console.log(key + "=" + value);
	}


sessionStorage 和 localStorage的clear()函数的用于清空同源的本地存储数据,比如localStorage.clear(),它将删除所有同源的本地存 储的localStorage数据,而对于Session Storage,它只清空当前会话存储的数据。

关闭页面会导致 sessionStorage 的数据被清除,但刷新或重新打开新页面数据还是存在,如果需要存储的只是少量的临时数据。我们可以使用sessionStorage 。或者做页面间的小交互。

sessionStorage 和 localStorage具有相同的方法storage事件,在存储事件的处理函数中是不能取消这个存储动作的。存储事件只是浏览器在数据变化发生之后给 你的一个通知。当setItem(),removeItem()或者clear() 方法被调用,并且数据真的发生了改变时,storage事件就会被触发。注意这里的的条件是数据真的发生了变化。也就是说,如果当前的存储区域是空的,你 再去调用clear()是不会触发事件的。或者你通过setItem()来设置一个与现有值相同的值,事件也是不会触发的。当存储区域发生改变时就会被触 发,这其中包含许多有用的属性:

  • storageArea: 表示存储类型(Session或Local)
  • key:发生改变项的key
  • oldValue: key的原值
  • newValue: key的新值
  • url*: key改变发生的URL

    * 注意: url 属性早期的规范中为uri属性。有些浏览器发布较早,没有包含这一变更。为兼容性考虑,使用url属性前,你应该先检查它是否存在,如果没有url属性,则应该使用uri属性
    如果调用clear()方法,那么key、oldValue和newValue都会被设置为null。
    PS.在firefox和chrome中存储和读取都是正常的, 但是对storage事件的触发似乎有点问题, 自身页面进行setItem后没有触发window的storage事件, 但是同时访问A.html和B.html, 在A页面中进行 setItem能触发B页面中window的storage事件, 同样的在B页面中进行setItem能触发A页面中window的storage事件. 在IE9中, 页面自身的设值能触发当前页面的storage事件,同样当前页面的设值能触发同一”起源”下其他页面window的storage事件,这看起来似乎更 让人想的通些.

    直接上demo,同时打开这两个页面(代码一模一样):

    http://www.css88.com/demo/sessionStorage/index2.html 

    http://www.css88.com/demo/sessionStorage/index3.html

参考阅读:《JavaScript本地存储实践(html5的localStorage和ie的userData)》


版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jdfkldjlkjdl/article/details/10304401

智能推荐

SPOJ - 687 REPEATS(后缀数组)_spoj_687-程序员宅基地

文章浏览阅读130次。题意:求重复次数最多的连续重复子串的长度题解:其实上一篇已经写过这种题【POJ-3693】了,只不过那题最后是要求解最后的串,这题只需要求出循环次数即可。一样的思路,枚举重复长度为L,就有rk[pos]rk[pos]rk[pos]和rk[pos+L]rk[pos+L]rk[pos+L]这两个串,pos为枚举的L的倍数,即rk[k∗L]rk[k*L]rk[k∗L]和rk[(k+1)∗L)]r..._spoj_687

Rviz教程(九):Plugins: New Tool Type_plant flag-程序员宅基地

文章浏览阅读3.4k次。PlantFlagTool¶OverviewThis tutorial shows how to write a new tool for RViz.In RViz, a tool is a class that determines how mouse events interact with the visualizer. In this example we descri_plant flag

应用安全设计规范--模板-程序员宅基地

文章浏览阅读1.9k次。应用安全设计规范的一个甲方模板,对新老系统的安全设计按照应用安全级别提供了一个管理规范

最新MT2503平台技术资料集锦_mt2503和mt2601-程序员宅基地

文章浏览阅读2.2k次。MT2503平台技术资料介绍:包括原理图、参考设计、规格书、源码、FAQ等一系列技术资料,有需要的可到一牛网论坛中下载或者到小编的CSDN资源里下载。此外,还有MT2503平台方案开发,MT2503模块等需要合作的,到一牛网论坛或在下方留言都可以。MT2503_all_feature__GPIO_Mapping_v1_0.rarMT2503_Ballmap_Package_V0.2.zi..._mt2503和mt2601

【MQ篇】Spring Boot 整合 RocketMQ 消息队列_springboot rocketmq队列发送1000条数据抢-程序员宅基地

文章浏览阅读910次。写在最前Docker安装RocketMQRocketMQ 入门必读Spring Boot 整合 RocketMQDemo 地址:mingyue-springboot-rocketmq1.添加依赖<dependency> <groupId>org.apache.rocketmq</groupId> <artifactId>rocketmq-spring-boot-starter</artifactId> <_springboot rocketmq队列发送1000条数据抢

【python爬虫专项(9)】哪吒之魔童降世影片的海报爬取_python 爬取电影海报-程序员宅基地

文章浏览阅读1.8k次。以哪吒之魔童降世影片的海报为例进行图片爬取参考网址:哪吒之魔童降世官方海报爬虫逻辑:【分页网页url采集】-【数据采集】-【保存图片】经过前两篇文章的实践,可以发现两种爬虫逻辑各有优缺点,逻辑(一)可以获得相对详细的信息,但是需要从主url中获取分页url再进行数据的爬取,很消耗时间,而逻辑(二)则是直接获取在第一个url上的信息,爬取即可,很省时,当然相对地获取的信息也就较少一些。而这次..._python 爬取电影海报

随便推点

word综合_word章号自动编号第x章-程序员宅基地

文章浏览阅读2.5k次,点赞20次,收藏26次。章号的自动编号格式为:第X章(例:第1章),其中:X为自动排序。阿拉伯数字序号。对应级别1,标题1。修改"标题1"样式,居中显示。小节名自动编号格式为:X.Y,X为章数字序号,Y为节数字序号(例:1.1),X,Y均为阿拉伯数字序号。对应级别2,标题2。修改"标题2"样式,左对齐显示。对出现"1)"、"2)"…处,进行自动编号,编号格式不变。编号为"章序号"-"图在章中的序号",(例如第1章中的第2幅图,题注编号为1-2)图的说明使用图下一行的文字,格式同编号。图居中。_word章号自动编号第x章

antdv动态表单回显_vform回显-程序员宅基地

文章浏览阅读3.5k次,点赞4次,收藏12次。在项目中经常遇到动态表单的业务。在编辑动态表单时需要回显新增后的内容。本文介绍Ant Design of Vue 的动态表单回显。比如新增时添加了两行动态表单,在第二次编辑时需要进行回显。下面是表单的HTML代码 <a-row :gutter='20' v-for="(k, index) in form.getFieldValue('keys')" :key="k" v-bind="index === 0 ? formI_vform回显

java面试机试题,springboot面试知识点总结_java sprintboot 面试-程序员宅基地

文章浏览阅读876次,点赞19次,收藏16次。现在其实从大厂招聘需求可见,在招聘要求上有高并发经验优先,包括很多朋友之前都是做传统行业或者外包项目,一直在小公司,技术搞的比较简单,没有怎么搞过分布式系统,但是现在互联网公司一般都是做分布式系统。所以说,如果你想进大厂,想脱离传统行业,这些技术知识都是你必备的,下面自己手打了一份Java并发体系思维导图,希望对你有所帮助。优先,包括很多朋友之前都是做传统行业或者外包项目,一直在小公司,技术搞的比较简单,没有怎么搞过分布式系统,但是现在互联网公司一般都是做分布式系统。_java sprintboot 面试

Android视频录制-MediaRecorder_android mediacodecsource-程序员宅基地

文章浏览阅读2k次,点赞3次,收藏15次。MediaRecorder流程如下:当使用CameraSource的时候MediaCodecSource会从CameraSource中取数据。当使用Surface的时候不用CameraSource。实际实现都是生产者消费者模型,由camera生产数据,由codec消费数据。只是具体实现过程不一样,camerasource录制使用的是puller,surface录制使用的是Buffe..._android mediacodecsource

盘合并扩展卷后实际容量不显示_哈勃望远镜观测表明壮观的草帽星系曾经历过一次重大的合并...-程序员宅基地

文章浏览阅读52次。哈勃空间望远镜显示草帽星系正在经历一次合并事件和狂野西部的亡命之徒一样,草帽星系盘面的辽阔边缘可能隐藏了动荡的过去。草帽星系(梅西叶星表编号为M104)从不是适合某个模型的星系。有个有趣发现,它是盘面旋涡星系和足球那样的椭圆星系的混合体。草帽星系的结构演变历程变得愈发奇怪,因为来自哈勃太空望远镜新证据表示草帽星系是一次重大星系合并的结果,虽然它光滑的盘面没有迹象表明有重大混乱等。这个星系微弱的晕圈...

idea提示忽略大小写_idea代码补全提示忽略大小写 2022-程序员宅基地

文章浏览阅读280次。idea提示忽略大小写File -> Settings -> Editor -> General -> Code Completion 在最上面的“Match case”默认是选中的,取消勾选idea在提示的时候就忽略大小写了,最后记得点apply或者OK如有疑问或其他问题,可以进QQ群咨询 :920199935..._idea代码补全提示忽略大小写 2022