H5的几种存储形式
一、H5的几种存储形式
1、本地存储（localstorage和sessionstorage）
存储形式：key-->value
过期策略：localstorage永久存储，不过期，除非手动删除，sessionstorage在重启浏览器、关闭页面或新开页面时失效
大小限制：每个域名5M
使用方法：（localstorage与sessionstorage操作相同）
getItem（读取）、setItem（设置）、removeItem（移除）、key（索引）、clear（清空）
存储内容：数组、json、图片、脚本、样式等可以序列化为字符串的内容
复制代码
//自定义localstorage的过期逻辑
function set(key,val){
var curTime=new Date().getTime();
localStorage.setItem(key,JSON.stringify({data:val,time:curTime}))
}
function get(key,exp){
var data=localStorage.getItem(key);
var dataObj=JSON.parse(data);
if(new Date().getTime()-dataObj.time>exp){
console.log("已过期")
}else{
console.log("data="+dataObj.data)
}
}
复制代码
使用场景：利用本地数据，减少网络传输，弱网高延迟低带宽，尽量数据本地化
2、离线存储（application cache）
3、IndexedDB和Web SQL
二、H5之前
1、主要使用cookies（缺点是每次请求头信息会带上；大小限制为4k；主Domain污染）
它的属性包括如下
复制代码
value //键值对，如test=hello
expires //绝对过期时间,如new Date()，所以浏览器都支持
domain //限定域名,如www.abc.com
path //限定路径，如/index
max-age //相对失效时间，单位为秒；取代expires，冲突则以max-age为准（IE不支持）
secure //协议，不需要指定，当HTTPS通信时自动打开
HttpOnly//仅用于服务器发送，JS无法读取
document.cookie='test=hello;expires='+new Date(2017,5,1)+';path=/index;domain=www.abc.com;max-age=60*60*24*365;'
复制代码
复制代码
//设置固定过期时间的cookies
function setCookie(name,value){
var Days = 30;
var exp = new Date();
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
复制代码
复制代码
//设置自定义过期时间cookie
function setCookie(name,value,time){
var msec = getMsec(time); //获取毫秒
var exp = new Date();
exp.setTime(exp.getTime() + msec*1);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//将字符串时间转换为毫秒,1秒=1000毫秒
function getMsec(DateStr){
var timeNum=str.substring(0,str.length-1)*1; //时间数量
var timeStr=str.substring(str.length-1,str.length); //时间单位前缀，如h表示小时
if (timeStr=="s"){ //20s表示20秒
return timeNum*1000;}
else if (timeStr=="h"){ //12h表示12小时
return timeNum*60*60*1000;}
else if (timeStr=="d"){
return timeNum*24*60*60*1000;} //30d表示30天
}
复制代码
复制代码
//读取cookies
function getCookie(name){
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)"); //正则匹配
if(arr=document.cookie.match(reg)){
return unescape(arr[2]);
}
else{
return null;
}
}
复制代码
复制代码
//删除cookies
function delCookie(name){
var exp = new Date();
exp.setTime(exp.getTime() - 1);
var cval=getCookie(name);
if(cval!=null){
document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
}
复制代码
