开发者社区> 科技探索者> 正文

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

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服务。
$cookieStore service is deprecated

5.小结

ngCookies模块提供的$cookies服务,为开发者操作读取和写入Cookie提供了极大的便利性,而且还支持写入和读取JSON对象。当时在开发过程中,我们还是不能过多向Cookie中写入数据,一方面Cookie的大小有限制,另外一方面敏感的数据写入Cookie,带来安全性上的风险。比如前面说到的完成“记住密码”功能,我们存储的用户名和密码,需要和后台约定一种加密方式,不能直接明文存储。

本文转自帅气的头头博客51CTO博客,原文链接http://blog.51cto.com/12902932/1926236如需转载请自行联系原作者


sshpp

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
25233 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
18990 0
阿里云服务器ECS远程登录用户名密码查询方法
阿里云服务器ECS远程连接登录输入用户名和密码,阿里云没有默认密码,如果购买时没设置需要先重置实例密码,Windows用户名是administrator,Linux账号是root,阿小云来详细说下阿里云服务器远程登录连接用户名和密码查询方法
21681 0
阿里云服务器安全组设置内网互通的方法
虽然0.0.0.0/0使用非常方便,但是发现很多同学使用它来做内网互通,这是有安全风险的,实例有可能会在经典网络被内网IP访问到。下面介绍一下四种安全的内网互联设置方法。 购买前请先:领取阿里云幸运券,有很多优惠,可到下文中领取。
19218 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
18715 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
14744 0
5488
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载