cookie，localStorage和sessionStorage

1、Cookie

　　Cookie 是小甜餅的意思。cookie 很是小，它的大小限制爲4KB左右。它的主要用途有保存登陸信息，好比你登陸某個網站市場能夠看到「記住密碼」，這一般就是經過在 Cookie 中存入一段辨別用戶身份的數據來實現的。

　　cookie以文本的方式存於客戶端，因爲http協議是無狀態的，只要客戶端與服務端數據交換完，就會斷掉連接，若是再請求就再次連接，而服務器是沒法保存這種連接的狀態，只有不停地連接、斷連接，因此須要cookie來作一個身份認證，再次請求的時候服務器會根據這個身份id進行用戶判斷。

　   但要注意cookie是不可跨域的，他會根據域名來區分向哪一個服務器發送數據。

　   其次，cookie不能存一些敏感信息， 由於經過瀏覽器獲取cookie很方便，很容易泄露一些我的信息，若是想存最好是對數據進行加密。

使用

　　保存cookie值：

    var dataCookie='110';
    document.cookie = 'token' + "=" +dataCookie; 

　　獲取指定名稱的cookie值：

 function getCookie(name) { //獲取指定名稱的cookie值
// (^| )name=([^;]*)(;|$),match[0]爲與整個正則表達式匹配的字符串，match[i]爲正則表達式捕獲數組相匹配的數組；
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) {
  console.log(arr);
  return unescape(arr[2]);
}
return null;
}
 var cookieData=getCookie('token'); //cookie賦值給變量。

2、localStorage

　　localStorage 是 HTML5 標準中新加入的技術，它並非什麼劃時代的新東西。早在 IE 6 時代，就有一個叫 userData 的東西用於本地存儲，而當時考慮到瀏覽器兼容性，更通用的方案是使用 Flash。而現在，localStorage 被大多數瀏覽器所支持。

3、sessionStorage

　　sessionStorage 與 localStorage 的接口相似，但保存數據的生命週期與 localStorage不一樣。sessionStorage它只是能夠將一部分數據在當前會話中保存下來，刷新頁面數據依舊存在。但當頁面關閉後，sessionStorage 中的數據就會被清空。

使用

　　localStorage和sessionStorage所使用的方法是同樣的，下面以sessionStorage爲例子：

var name='sessionData';
var num=120;
sessionStorage.setItem(name,num);//存儲數據
sessionStorage.setItem('value2',119);
let dataAll=sessionStorage.valueOf();//獲取所有數據
console.log(dataAll,'獲取所有數據');
var dataSession=sessionStorage.getItem(name);//獲取指定鍵名數據
var dataSession2=sessionStorage.sessionData;//sessionStorage是js對象，也可使用key的方式來獲取值
console.log(dataSession,dataSession2,'獲取指定鍵名數據');
sessionStorage.removeItem(name); //刪除指定鍵名數據
console.log(dataAll,'獲取所有數據1');
sessionStorage.clear();//清空緩存數據：localStorage.clear();
console.log(dataAll,'獲取所有數據2');  

4、三者的異同

 

 5、應用場景

　　由於每次http請求都會攜帶cookie信息，這樣無形中浪費了帶寬，因此cookie應該儘量少的使用，另外cookie還須要指定做用域，不能夠跨域調用，限制比較多。

　　可是用來識別用戶登陸來講，cookie仍是比storage更好用的。其餘狀況下，可使用storage，就用storage。

　　而另外一方面 localStorage 接替了 Cookie 管理購物車的工做，同時也能勝任其餘一些工做。好比HTML5遊戲一般會產生一些本地數據，localStorage 也是很是適用的。若是遇到一些內容特別多的表單，爲了優化用戶體驗，咱們可能要把表單頁面拆分紅多個子頁面，而後按步驟引導用戶填寫，這時候 sessionStorage 的做用就發揮出來了。