首頁 > 文章 > web前端 > AngularJs操作Cookies實例分享

AngularJs操作Cookies實例分享

小云云原創: 2018-03-08 15:26:121686瀏覽

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, {&#39;expires&#39;: expireDate});
获取也很方便：
$scope.ID = $cookies.getObject("user").username;
$scope.sid = $cookies.getObject("user").password;
简单的只有一个key-value的话用put()比较简单，但是是过期时间是session，关闭浏览器就没有了。
$cookies.put(&#39;myFavorite&#39;, &#39;oatmeal&#39;);
再说说$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服務。

AngularJs操作Cookies實例分享

相關文章