基本概念

cookie：存儲在客戶端的小型文本文件，可以包含若干鍵值對，每個鍵值對可以設置過期時間（默認過期時間為關閉瀏覽器時）。 cookie會在每次發送HTTP請求時附加到Cookie頭字段，服務器以此得知用戶所處的狀態。 cookie限制在4kb
sessionStorage：會話存儲，存儲在本地，不會被發送到服務器上，并且關閉后存儲的內容失效。最多可以存儲5-10M
localStorage：本地存儲，不會被發送到服務器上，默認會永久存儲，除非手動刪除。最多可以存儲5-10M

Storage支持的瀏覽器版本

imp.png

差異

使用

cookie：

//記錄cookie值
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 getCookie (name){
    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
     if(arr !== null){
        return unescape(arr[2]);
     }else{
         return null;
     }
};
//刪除cookie值
function deleteCookie (name) {
    var exp = new Date(); 
    exp.setTime(exp.getTime() - 1); 
    document.cookie = name + "=; expires=" + exp.toGMTString();
};

sessionStorage：

// 保存數據到sessionStorage
sessionStorage.setItem('key', 'value');

// 從sessionStorage獲取數據
var data = sessionStorage.getItem('key');

// 從sessionStorage刪除保存的數據
sessionStorage.removeItem('key');

// 從sessionStorage刪除所有保存的數據
sessionStorage.clear();

localStorage：

// 保存數據到localStorage
localStorage.setItem('key', 'value');

// 從localStorage獲取數據
var data = localStorage.getItem('key');

// 從localStorage刪除保存的數據
localStorage.removeItem('key');

// 從localStorage刪除所有保存的數據
localStorage.clear();