html5提供了两种在客户端存储数据的新方法
localStorage: 无时间限制的数据存储
sessionStorage:针对一个session的数据存储
localStorage/sessionStorage用来替代cookie。因为cookie不能存储大量的数据,二期每个服务器请求都会传递,效率较低速度也慢。
cookie上限为4k,localStorage一般浏览器支持的是5M大小,这个在不同的浏览器中localStorage会有所不同。
localStorage支持增删改查。
localStorage使用: //sessionStorage使用方式相同
//推荐使用getUtem/setItem,也可以用json方式访问
var storage = window.localStorage;
storage.setItem('name','张三'); //storage.name = '张三'
storage.setItem('code','00001');
console.log(storage.getItem('name')); //张三
storage.setItem('data',JSON.stringify({phone:'13000000000',car:'红旗'}))
var data = JSON.parse(storage.getItem('data'));
console.log(data.phone+'|'+data.car);//13000000000|红旗
//遍历
console.log(storage.length); //3
for(let i=0;i<storage.length;i++){
console.log(storage.key(i)); //code data name
}
//删除
storage.removeItem('code');
for(let i=0;i<storage.length;i++){
console.log(storage.key(i)); //data name
}
localStorage只存储字符串,如果存储对象,需要用JSON.stringify()将对象反序列化为字符串,同理,获取对象字符串后,序列化为对象。
另外需要注意:
IE8以上才支持localStorage。
localStorage在隐私模式下不可读取。
localStorage不会被爬虫抓取。