AngularJs 如何操作Cookies ?!

今天來聊一聊Cookie.  Cookie可以說是一種客戶端技術,程序把用戶的一些信息以cookie的形式寫給用戶各自的瀏覽器。說白了就是網站爲了辨別用戶身份而儲存在用戶電腦上的數據。 很多購物網站的購物車功能、論壇自動登錄功能都是靠Cookie實現。

對cookies進行操作包括保存,獲取和刪除。

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

  1. $cookieStore服務

  2. $cookies服務

先說說$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:比如用戶登錄,記住密碼的cookie有效期是7天。

  var cookieInfo= {};

  cookieInfo.username = $scope.username;

  cookieInfo.password = $scope.password;

  var expireDate = new Date();

  expireDate.setDate(expireDate.getDate() + 7);//設置cookie保存7天

  $cookies.putObject("user", cookieDate, {'expires': expireDate});

獲取也很方便:

$scope.ID = $cookies.getObject("user").username;

$scope.sid = $cookies.getObject("user").password;

簡單的只有一個key-value的話用put()比較簡單,但是是過期時間是session,關閉瀏覽器就沒有了。

$cookies.put('myFavorite', 'oatmeal');

再說說$cookieStore ,$cookieStore服務是基於後端的Session Cookies,所以寫入的時候不能使用options屬性,而且它的過期時間就是session。關閉瀏覽器了,cookie就失效了。$cookieStore不可以通過設置default裏面的expires來設置過期時間,$cookieStore操作Cookie都是基於Session過期的。

所以上面的例子你如果使用$cookieStore來實現記住用戶名和密碼的話,關閉瀏覽器cookies就失效了,無法達到記住n天的這個功能。

$cookieStore.put("user", {

                username:aaa,

                password:123

               expires: new Date(new Date().getDate() + 5000)

            });

這樣過期時間是無效的!!!!

總結:

ngCookies模塊提供的$cookies服務,爲開發者操作讀取和寫入Cookie提供了極大的便利性,而且還支持寫入和讀取對象,比較方便好用。當時在開發過程中,我們還是不能過多向Cookie中寫入數據,一是因爲Cookie的大小有限制,另外一方面敏感的數據寫入Cookie,安全方面有風險。密碼都是需要和後臺約定一種加密方式,不能直接明文存儲,這樣極不安全。使用 cookies 需謹慎,多注意路徑(path)和域的坑就基本沒什麼問題了。

最後:Angular官網已經提示,$cookieStore已經過時,推薦使用$cookies服務。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章