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服务。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值