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

[html5]API详解9:大家都知道的localStorage API 本地存储

时间:2017-03-06 14:22web前端教程
提到本地存储localStorage就不得不提sessionStorage和cookie这两个。其中localStorage和sessionStorage可以合成称为web Storage

提到本地存储localStorage就不得不提sessionStorage和cookie这两个。其中localStorage和sessionStorage可以合成称为web Storage。

这里比较一下cookie和web Storage:

cookie:容量4kb,各种浏览器都支持,但每次请求都会把本地存的cookies发送到服务器。

web Storage:存储空间更大,数据仅存在本地,不与服务器发生交互,独立的存储空间。

而localStorage和sessionStorage的区别:

localStorage:同源(相同个域名、协议和端口)的数据会长时间保存下来,即使浏览器关掉了也不受影响。

sessionStorage:数据存储在窗口对象中,对于浏览器其他窗口或者新标签不可见。窗口关闭,数据丢失。

localStorage的使用:

1.设置键值对:localStorage.setItem('name','value'); 还有对象简易的写法:localStorage.name = value或者localStorage['name'] = value;

2.获取指定键值对:localStorage.getItem('name');

3.删除指定键值对:localStorage.removeItem('name');简易的写法:delete localStorage['name'];

4.删除同源下的所有键值对:localStorage.clear();

5.获取所有键值对的总数长度:localStorage.length;

6.获取键值对的key:localStorage.key(indexNum);

7.storage事件,当localStorage的键值对发生变化的时候,就会触发storage事件

if (window.addEventListener) {

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

} else {

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

};

事件触发之后会传一个对象作为参数给处理函数,其中主要用到的对象属性有:

{

url:'当前window的url',

key:'键',

newValue:'新值',

oldValue:'旧值',

timeStamp:'时间戳',

type:'storage'

 

}

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器