JS常用幾種存儲方式的使用規則與各自特征

日常我們數據存儲的方式常見的幾種就是sessionStroage, localStroage, cookie，下面先依次總結各自的使用規則，然后再到這三者之間的區別。

sessionStroage

sessionStroage是HTML5新增的一個回話存儲對象，用於臨時保持同一窗口的數據，窗口關閉數據也將刪除。

存儲單個變量:

    存儲數據： sessionStroage.setItem('name', 'Tiboo')

    讀取數據： sessionStroage.getItem('name')

存儲JSON對象:

info = {
   name: 'Tiboo',
   number: '1204914',
   guid: '00123'
}
存儲值： 將對象轉換為JSON字符串
sessionStroage.setItem('info', JSON.stringify(info));
讀取值： 將JSON字符串轉換為對象
let infoData = JSON.parse(sessionStroage.getItem('info'))

localStroage

localStroage是HTML5新增特性，本地存儲，同時不受時間限制的數據存儲，localStorage中一般瀏覽器支持的是5M大小。

存儲單個變量:

    存儲數據： localStroage.setItem('name', 'Tiboo')

    讀取數據： localStroage.getItem('name')

存儲JSON對象:

info = {
   name: 'Tiboo', number: '1204914', guid: '00123' } 存儲值： 將對象轉換為JSON字符串 localStroage.setItem('info', JSON.stringify(info)); 讀取值： 將JSON字符串轉換為對象 let infoData = JSON.parse(localStroage.getItem('info'))

刪除單個數據：

localStorage.removeItem('info');

刪除所有數據：

localStorage.clear()

由於localStorage中一般瀏覽器支持的是5M大小，故當緩存中數據大於5M時，出現不存儲數據，也不會覆蓋現有數據，並且引發QUTA_EXCEEDED_ERR異常,故可以通過異常來強制清除緩存，如下所示：

try {
   localStorage.setItem('info', JSON.stringify(info));
  } catch (e) {
     //存儲滿了,全部刪除
     localStorage.clear();
     localStorage.setItem('info', JSON.stringify(info));
}

cookie

• cookie用於存儲web頁面的用戶信息，當用戶訪問web頁面時，他的名字可以記錄在cookie中，在用戶下一次訪問該頁面時，可以在cookier中讀取用戶訪問記錄
• 客戶端Cookie 數量最多為300個，每個不能超過4kb, 每個web站點設置的cookie 數量不能超過20個

創建cookie:

 this.setCookie('b2bPartnerId', partnerId)
 // 設置過期時間為30天
 setCookie(name, value) { 
   let Days = 30; 
   let exp = new Date(); 
   exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000); 
   document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString(); 
 },

 讀取cookie:

let partnerId = this.getCookie('b2bPartnerId')
getCookie(name) { 
  let arr,
    reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)');
  arr = document.cookie.match(reg)
  if (arr) {
    if (arr.length) {
      return unescape(arr[2]); 
    } else {
      return null; 
    }
  } else {
    return null;
  }
},

 工作時沒注意遇到的小坑：

 在設置完cookie值后，便立即從cookie中獲取值，此時可能出現拿到的值為空。因為cookie值的設置與電腦的性能是有關系的，那個時刻cookie值可能還未設置成功。