html离线存储之localStorage（一）

h5之前的离线存储：cookie

问题是：1.cookie会在请求头中，臃肿且不安全

2.cookie有大小限制，4k

3.关系存储问题

h5提供的离线存储方案：

1.localstorage 大小5M sessionstorage（存储会话，关闭会话数据消失）

2.appliacation cache

3.indexDB和webSQL

localstorage 

1.核心方法：

getItem 根据键获取值

setItem 创建新的记录

removeItem 根据键删除对应记录

key  获取localStorage的属性名称（键名称）

clear 清除所有键值对

其中创建新的记录方法：localStorage.setItem(key,value)和localStorage.key=value

需要注意的地方：

1.使用前判断浏览器是否支持

2.写数据时需要进行异常处理，避免超出容量出错

3.避免把敏感的信息写入localStorage

4.key唯一性

5.localstorage无法指定存储位置

6.不同浏览器在同一域下产生的localstorage数据是独立的

判断浏览器是否支持的方法：先set一次，并进行异常捕获

容量查看可参考http://www.cnblogs.com/MonkeyKingK/p/5499831.html

下面是写的一些接口，带过期检测处理

//浏览器支持性检测
function ifSupport() {
try{
localStorage.setItem("test","ifSupport");
localStorage.removeItem("test");
return true;
}catch(e){
if(e.message){
console.log(e.name+":"+e.message);
}else{
//IE
console.log(e.name+":"+e.description);
}
}
}

//带过期时间的set value(string)
function setWithLife(key,value){
var curtime=new Date().getTime();
localStorage.setItem(key,JSON.stringify({data:value,time:curtime}));
}

//带过期检测的get,过期可选删除 exp(timestamp)设定的过期时间
function getWithLife(key,exp,dele=false){
var nowtime=new Date().getTime();
var json_data=localStorage.getItem(key);
var obj_data=JSON.parse(json_data);
if(nowtime-obj_data.time<exp){
return obj_data.data;
}else{
if(dele!=false){
localStorage.removeItem(key);
}else{
return false;
}
}
}