【问题标题】:How to set expiration date for cookie in AngularJS如何在 AngularJS 中设置 cookie 的过期日期
【发布时间】:2012-09-19 09:42:11
【问题描述】:
  1. 我们希望将用户的授权信息存储在 cookie 中,该信息不应在浏览器刷新 (F5) 时丢失。

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

【问题讨论】:

标签: javascript cookies angularjs session-cookies angular-cookies


【解决方案1】:

在 Angular 的 1.4.0 版本中可以使用 ngCookies 模块:

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});
}]);

【讨论】:

  • 如果{'expires': expireDate}); 或 ...... ........ 应该使用[{'expires': expireDate}]); 格式...
  • 文档 $cookies.put(key, value, [options]) 的 [ ] 是“可选”的注释。不是数组的意思!!!事实上,如果您再次阅读文档,他们说“选项”是一个对象 {a:x, b:y, c:z }。
【解决方案2】:

对于 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 上。

此功能通常仅在使用 3rd 方库时才需要 在运行时以编程方式更改 cookie。如果你依赖这个 那么您必须编写可以对第 3 方做出反应的代码 库对 cookie 进行更改或实施您自己的轮询 机制。

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

对于 1.3 及以下版本: 对于那些已经尽力避免加载 jQuery 插件的人来说,这似乎是 angular 的一个很好的替代品 - https://github.com/ivpusic/angular-cookie

【讨论】:

  • 使用 Angular 1.3 或更低版本时的绝佳解决方案。
【解决方案3】:

在 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,您将看到过期将正确设置为名为 someToken 的 cookie。

作为第三个参数传递给上述put 函数的对象也允许其他选项,例如设置pathdomainsecure。查看the docs 了解概览。

PS - 如果您要升级,请注意 $cookieStore 已被弃用,因此 $cookies 现在是处理 cookie 的唯一方法。见docs

【讨论】:

    【解决方案4】:

    我想举一个额外的例子,因为有些人知道 cookie 生命周期的额外持续时间。 IE。他们希望将 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

    【讨论】:

    • today 来自哪里?
    • 我试图让代码变得更好,却忘记将所有“现在”更改为“今天”。现在应该没问题了。
    • 我有一个问题。当我从 cookie 中获取值时,我应该检查它的过期日期还是 $cookies 如果值过期则自动返回 undefined?
    【解决方案5】:

    您可以转到 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
    

    【讨论】:

      【解决方案6】:

      我知道这个问题有点老了,并且已经有了一个公认的答案。

      但仍然是我正在努力解决的一个当前问题(与 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 模块化混合使用。因此,如果您使用ipCookie(...) 设置 cookie,则使用 ipCookie(...) 检索它,因为使用 $cookie 它将返回 undefined

      【讨论】:

        【解决方案7】:

        作为 @vincent-briglia pointed out,有一个 jQuery 插件可以用作解决方法,直到 $cookie 服务变得可配置 - check it out here

        【讨论】:

          【解决方案8】:

          您可以使用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 });
          

          【讨论】:

            猜你喜欢
            • 1970-01-01
            • 2017-02-20
            • 1970-01-01
            • 1970-01-01
            • 2017-08-23
            • 1970-01-01
            • 1970-01-01
            • 1970-01-01
            • 2017-02-19
            相关资源
            最近更新 更多