localStorage和sessionStorage详解

前言

HTML5引入了localStorage和sessionStorage两个本地缓存对象,以解决cookie缓存容量少的问题。由于cookie每次都会随着请求被发送出去,所以数据放在cookie中将造成宽带浪费。但是本地缓存并不能取代cookie,cookie是作为http规范的一部分,是用于与服务器交互的不必可少的条件之一。


区别

localStorage:本地缓存,没有时间限制,将一直缓存在本地。
sessionStorage:会话缓存,即浏览器关闭的时候清除缓存数据。

方法

localStorage和sessionStorage具有相同的方法,具体如下(以localStorage为例):
1.设置缓存数据:localStorage.setItem(key,value);
2.获取缓存数据:localStorage.getItem(key);
3.获取全部缓存数据:localStorage.valueOf();
4.获取指定下标的key键值:localStorage.key(N);
5.删除缓存数据:localStorage.removeItem(key) ;
6.清空缓存数据:localStorage.clear();

localStorage.setItem("test","123");
localStorage.setItem("num","567");
localStorage.setItem("ber","89");
var a = localStorage.getItem("test");
console.log(a);				//123
var b = localStorage.valueOf();
console.log(b);				//Storage {ber: "89", num: "567", test: "123", length: 3}
var c = localStorage.key(1);
console.log(c);				//num
localStorage.removeItem("test");
console.log(localStorage.getItem("test"));	//null
localStorage.clear();
console.log(localStorage.length);	//0

由于 localStorage和sessionStorage是js对象,所以也可以使用.key或['key']的方式来设置值或获取值。
localStorage.num = "567";
localStorage.ber = "89";
console.log(localStorage.num);
console.log(localStorage['ber']);

存储大小限制

IE 9          > 4999995 + 5 = 5000000
firefox 22.0 > 5242875 + 5 = 5242880
chrome  28.0  > 2621435 + 5 = 2621440
safari  5.1   > 2621435 + 5 = 2621440
opera   12.15 > 5M (超出则会弹出允许请求更多空间的对话框)

可参照该网页进行测试:https://arty.name/localstorage.html


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值