·您当前的位置:主页 > 技术教程 > Html5技术 >

[html5]API详解10:sessionStorage API 实用方法与场景

时间:2017-03-06 14:25web前端教程
sessionStorage和localStorage大部分是相同的,包括功能和使用。功能上唯一的区别是:localStorage是本地长时间存储

sessionStorage和localStorage大部分是相同的,包括功能和使用。功能上唯一的区别是:localStorage是本地长时间存储,不会因为窗口关闭而丢失存储的数据,而sessionStorage会话存储则是仅保留本次会话的数据,浏览器窗口或者标签关闭的时候就会数据消失,但是刷新当前页面的话数据依然可以保留。

设置sessionStorage的值有3种写法:

sessionStorage.name1 = 'value1';

sessionStorage.name2 = 'value2';

sessionStorage.setItem('name3','value3') ;

同样获取也有3种写法:

sessionStorage.name1;

sessionStorage['name2'];

sessionStorage.getItem('name3');

获取sessionStorage的长度:

sessionStorage.length

获取sessionStorage的key

sessionStorage.key(index);

删除指定的键值对:

sessionStorage.removeItem('name');

删除所有的键值对:

sessionStorage.clear();

storage事件,用法和localStorage一样的:

if (window.addEventListener) {

window.addEventListener("storage", handlerStorage, false);

} else {

window.attachEvent("onstorage", handlerStorage); //IE浏览器

};

使用场景:

一般使用在每一次打开新窗口的时候要完成某个特定操作,而打开后刷新页面不用再次完成该操作。小编在做一个H5网站的时候使用过,每次新打开网站的时候需要用一个介绍屏,来顶替数据加载做造成的空白页面。

微信付费直播
酷播云免费在线视频整体解决方案
参与开学季云视频优惠,拿GET2017教育科技大会VIP门票
进入开学季,保利威视推出云视频优惠,云视频套餐、流量超实惠大放“价”就是现在,还可以免费获取GET2017教育科技大会VIP门票哦!