Angular中ngCookies模塊介紹

1.Cookie介紹

Cookie總是保存在客戶端中，按在客戶端中的存儲位置，可分為內存Cookie和硬盤Cookie。內存Cookie由瀏覽器維護，保存在內存中，瀏覽器關閉后就消失了，其存在時間是短暫的。硬盤Cookie保存在硬盤里，有一個過期時間，除非用戶手工清理或到了過期時間，硬盤Cookie不會被刪除，其存在時間是長期的。所以，按存在時間，可分為非持久Cookie和持久Cookie。

主要因為HTTP協議無狀態性，服務器需要知道用戶在之前的頁面做了哪些操作，所欲引入Cookie，是一種解決HTTP協議無狀態的一種方式。

服務器可以設置或讀取Cookies中包含的信息，用來維護用戶和服務器會話中的狀態。

2.Cookie應用場景

• 電子商務購物網站，需要在用戶點擊支付之前，知道用戶購買了哪些商品。 說明：目前也有不部門實現是，每次點擊購買，都直接發請求到后臺，后臺存儲要購買的數據，然后再點擊支付之前，從后臺獲取用戶要購買的尚品數據，不使用Cookie也可以完成。

• 用戶登錄，記住密碼。開發者可以在用戶登錄之后，將用戶名和密碼，以某種加密的方式存儲到客戶端，第二次登錄時，直接獲取Cookie，然后發送Cookie到后臺服務器進行驗證，達到用戶勾選了“記住密碼”，后續無需輸入用戶名和密碼的功能。當然是在Cookie的有效期內。

基于jQuery的jQuery.cookie.js是很多開發者用于項目中操作Cookie的庫。

Angular中為了用戶方便和簡潔的操作Cookie，提供了ngCookies模塊。這個模塊下面提供2種服務，分別是：

1. $cookieStore服務

2. $cookies服務
   

3.Angular中的$cookies服務

$cookies類似jQuery.cookie.js，提供了Angular操作Cookie的方法，普通情況下，JavaScript是不同向Cookie寫入對象的，但是Angular提供向Cookie寫入對象的方法。 $cookies提供一下方法：
get(key) 返回一個指定key的cookie值

getObject(key) 返回一個指定key的反序列化cookie值

getAll() 以key-value對象形式返回所有的cookie

put(key,value,[options]) 寫入一個key-value的cookie

putObject(key,value,[options])序列化設置一個key-value的Cookie

remove(key,[options]) 移除對應key的cookie

demo如下：

angular.module('cookiesExample', ['ngCookies'])
.controller('ExampleController', ['$cookies', function($cookies) {
  // Retrieving a cookie
  var favoriteCookie = $cookies.get('myFavorite');
  // Setting a cookie
  $cookies.put('myFavorite', 'oatmeal');}]);

比如設置cookie的寫入目錄，或者過期時間。我們可以用到的$cookiesProvider里面的default配置信息。

https://docs.angularjs.org/api/ngCookies/provider/$cookiesProvider#defaults 頁面可以查看$cookieProvider里面可以配置的信息。比如用戶登錄，記住密碼的cookie有效期是7天。代碼如下：

var expireDate = new Date();expireDate.setDate(expireDate.getDate() + 7);var user={username:encryptionStr("admin"),password:encryptionStr('123456')}$cookies.putObject('user',user,{'expires':expireDate});

encryptionStr() 是自定義的加密字符串方法。

4.Angular中的$cookieStore服務

$cookieStore 服務是基于后端的Session Cookies，所以不能寫入的時候不能使用options屬性，而且它的過期時間就是session。關閉瀏覽器了，cookie就失效了。在開發過程中，遇到一位同事，要完成 用戶登錄記住用戶名和密碼功能，使用的是如下代碼，代碼是無效的，因為$cookieStore不可以通過設置default里面的expires設置過期時間，$cookieStore操作Cookie都是基于Session過期的。

var expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 7);var user={
username:encryptionStr("admin"),
password:encryptionStr('123456')
}

$cookieStore.putObject('user',user,{'expires':expireDate});

寫這篇博客的時候，Angular官網已經提示，$cookieStore已經過時，推薦使用$cookies服務。

5.小結

ngCookies模塊提供的$cookies服務，為開發者操作讀取和寫入Cookie提供了極大的便利性，而且還支持寫入和讀取JSON對象。當時在開發過程中，我們還是不能過多向Cookie中寫入數據，一方面Cookie的大小有限制，另外一方面敏感的數據寫入Cookie，帶來安全性上的風險。比如前面說到的完成“記住密碼”功能，我們存儲的用戶名和密碼，需要和后臺約定一種加密方式，不能直接明文存儲。