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; } } }