HTML5-js-本地儲存與cookies
阿新 • • 發佈:2018-11-08
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();
}
}
注意:cookie是基於域名來儲存的。要放到測試伺服器上或者本地localhost伺服器上才會生效。cookie具有不同域名下儲存不可共享的特性。單純的本地一個html頁面開啟是無效的。