如何在AngularJS中设置Cookie的到期日期


80
  1. 我们希望将用户的授权信息存储在cookie中,该信息在浏览器刷新(F5)时不会丢失。

  2. 如果用户在登录时选择了“记住我”复选框,我们希望将授权信息存储在“永久cookie”中。


2
我暂时为此目的使用本地存储和会话存储,请参考people.opera.com/shwetankd/external/demos/webstorage_demo.htm
Anand

Answers:


45

在使用ngCookies模块的angular 1.4.0构建中可以做到这一点:

https://docs.angularjs.org/api/ngCookies/service/$cookies

angular.module('cookiesExample', ['ngCookies'])
.controller('ExampleController', ['$cookies', function($cookies) {
  // Find tomorrow's date.
  var expireDate = new Date();
  expireDate.setDate(expireDate.getDate() + 1);
  // Setting a cookie
  $cookies.put('myFavorite', 'oatmeal', {'expires': expireDate});
}]);

2
从文档中不清楚是否{'expires': expireDate});... ............[{'expires': expireDate}]);应该使用格式...
Serge

2
文档$ cookies.put(key,value,[options])的[]是“可选”的注释。这并不意味着数组!!!实际上,如果您再次阅读文档,他们说“选项”是一个对象{a:x,b:y,c:z}。
珍娜·叶

32

对于1.4:如此处和下面其他注释中所述,从1.4开始,Angular的本机cookie支持现在提供了编辑cookie的功能:

由于38fbe3ee,$ cookies将不再显示代表当前浏览器cookie值的属性。$ cookies不再轮询浏览器是否更改了cookie,也不再将cookie值复制到$ cookies对象上。

之所以进行了更改,是因为轮询成本很高,并且会导致$ cookies属性与实际浏览器cookie值无法正确同步的问题(最初添加轮询的原因是允许不同选项卡之间进行通信,但是今天有更好的方法来执行此操作,例如localStorage。)

$ cookies上的新API如下:

get put getObject putObject getAll remove必须显式使用上述方法才能访问cookie数据。这也意味着您不能再监视$ cookies上的属性来检测浏览器cookie上发生的更改。

通常仅在第三方库在运行时以编程方式更改Cookie时才需要此功能。如果您依赖于此,那么您必须编写可以对第三方库做出反应以对Cookie进行更改的代码,或者实现自己的轮询机制。

实际的实现是通过$ cookiesProvider对象完成的,该对象可以通过put调用传递。

对于1.3及以下版本:对于那些竭尽所能避免加载jQuery插件的人,这似乎是angular的不错替代品-https: //github.com/ivpusic/angular-cookie


使用Angular 1.3或更低版本时,这是一个很好的解决方案。
vegemite4me,2015年

27

在Angular v1.4中,您最终可以为cookie设置一些选项,例如过期。这是一个非常简单的示例:

var now = new Date(),
    // this will set the expiration to 12 months
    exp = new Date(now.getFullYear()+1, now.getMonth(), now.getDate());

$cookies.put('someToken','blabla',{
  expires: exp
});

var cookie = $cookies.get('someToken');
console.log(cookie); // logs 'blabla'

如果在运行此代码后检查cookie,您将看到将过期设置正确地设置为名为的cookie someToken

作为第三PARAM到传递的对象put上述功能允许其他选项,以及,诸如设置pathdomainsecure。查看文档以获取概述。

PS-作为一个旁注,如果您要升级$cookieStore已经过时的思维$cookies方法,那么现在是处理cookie的唯一方法。查看文件


15

我想举一个额外的例子,因为有些人知道cookie寿命的额外持续时间。即。他们希望将Cookie设置为持续10分钟或1天以上。

通常,您已经知道Cookie可以持续多长时间(以秒为单位)。

    var today = new Date();
    var expiresValue = new Date(today);

    //Set 'expires' option in 1 minute
    expiresValue.setMinutes(today.getMinutes() + 1); 

    //Set 'expires' option in 2 hours
    expiresValue.setMinutes(today.getMinutes() + 120); 


    //Set 'expires' option in (60 x 60) seconds = 1 hour
    expiresValue.setSeconds(today.getSeconds() + 3600); 

    //Set 'expires' option in (12 x 60 x 60) = 43200 seconds = 12 hours
    expiresValue.setSeconds(today.getSeconds() + 43200); 

    $cookies.putObject('myCookiesName', 'myCookiesValue',  {'expires' : expiresValue});

您可以照常检索它:

    var myCookiesValue = $cookies.getObject('myCookiesName');

如果为空,则返回undefined。

链接;

http://www.w3schools.com/jsref/jsref_obj_date.asp
https://docs.angularjs.org/api/ngCookies/provider/ $ cookiesProvider#defaults


1
哪里today来的?
Thomas Kekeisen

我试图使代码更好,却忘记将所有“现在”更改为今天。现在应该没事了。
Andreas Panagiotidis

我有个问题。当我从Cookie中获取值时,是否应该检查其过期日期,或者$cookies如果值已过期则自动返回undefined?
hadi.mansouri,

3

您可以转到angular.js脚本并更改插入cookie
搜索,self.cookies = function(name, value) { 然后您可以更改添加cookie的代码,例如7天

 if (value === undefined) {
    rawDocument.cookie = escape(name) + "=;path=" + cookiePath +
                            ";expires=Thu, 01 Jan 1970 00:00:00 GMT";
  } else {
    if (isString(value)) {
        var now = new Date();
        var time = now.getTime();
        time += 24*60*60*1000*7;
        now.setTime(time);
         cookieLength = (rawDocument.cookie = escape(name) + '=' + escape(value) +
                 ';path=' + cookiePath+";expires="+now.toGMTString()).length + 1

2

我知道这个问题有点老了,已经有了一个可以接受的答案。

但是仍然是我在努力解决的当前问题(不涉及jQuery或纯Javascript)。

因此,经过一些研究,我发现了这一点:https : //github.com/ivpusic/angular-cookie

它提供了一个非常类似于$ cookieStore的“接口”。并允许配置失效日期(值和单位)。

关于使用$ cookie或$ cookieStore在到期日提供的角度本机支持,“他们”承诺在1.4上对此主题进行更新,请查看以下内容:https : //github.com/angular/angular.js/pull/10530

可以使用$ cookieStore.put(...)设置到期日期,至少他们建议...

编辑:我遇到了一个“问题”,您不能将$ cookies与angular-cookie模块化相混合。因此,如果您设置一个cookie来ipCookie(...)检索它,ipCookie(...)因为$ cookie会返回undefined



0

您可以使用https://github.com/ivpusic/angular-cookie

首先,您需要将ipCookie注入您的angular模块。

var myApp = angular.module('myApp', ['ipCookie']);

现在,例如,如果您想从控制器中使用它

myApp.controller('cookieController', ['$scope', 'ipCookie', function($scope, ipCookie) {
  // your code here
}]);

创建cookie使用

ipCookie(key, value);

该值支持字符串,数字,布尔值,数组和对象,并将自动序列化到cookie中。

您还可以设置一些其他选项,例如Cookie过期的天数

ipCookie(key, value, { expires: 21 });
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.