今天來聊一聊Cookie. Cookie可以說是一種客戶端技術,程序把用戶的一些信息以cookie的形式寫給用戶各自的瀏覽器。說白了就是網站爲了辨別用戶身份而儲存在用戶電腦上的數據。 很多購物網站的購物車功能、論壇自動登錄功能都是靠Cookie實現。
對cookies進行操作包括保存,獲取和刪除。
Angular中爲了用戶方便和簡潔的操作Cookie,提供了ngCookies模塊。這個模塊下面提供2種服務,分別是:
$cookieStore服務
$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服務。