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頁面開啟是無效的。