237

AngularJS 访问 cookie 的方式是什么?我已经看到了对 cookie 的服务和模块的引用,但没有示例。

有,还是没有 AngularJS 规范的方法?

4

9 回答 9

200

此答案已更新以反映最新的稳定 angularjs 版本。一个重要的注意事项是$cookieStore周围有一层薄薄的包装纸$cookies。它们几乎相同,因为它们仅适用于会话 cookie。虽然,这回答了最初的问题,但您可能希望考虑其他解决方案,例如使用 localstorage 或 jquery.cookie 插件(这将为您提供更细粒度的控制并执行服务器端 cookie。当然,在 angularjs 中这样做意味着您可能希望将它们包装在服务中并用于$scope.apply通知模型更改的角度(在某些情况下)。

另一个注意事项是,根据您是用于$cookie存储值还是$cookieStore. 当然,您真的想使用其中一个。

除了添加对 js 文件的引用之外,您还需要将其注入ngCookies到您的应用定义中,例如:

angular.module('myApp', ['ngCookies']);

然后你应该很高兴。

这是一个功能最小的示例,我在其中展示了它cookieStore是 cookie 的薄包装:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body ng-controller="MyController">

  <h3>Cookies</h3>
  <pre>{{usingCookies|json}}</pre>
  <h3>Cookie Store</h3>
  <pre>{{usingCookieStore|json}}</pre>

  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-cookies.js"></script>
  <script>
    angular.module('myApp', ['ngCookies']);
    app.controller('MyController',['$scope','$cookies','$cookieStore', 
                       function($scope,$cookies,$cookieStore) {
      var someSessionObj = { 'innerObj' : 'somesessioncookievalue'};

    $cookies.dotobject = someSessionObj;
    $scope.usingCookies = { 'cookies.dotobject' : $cookies.dotobject, "cookieStore.get" : $cookieStore.get('dotobject') };

    $cookieStore.put('obj', someSessionObj);
    $scope.usingCookieStore = { "cookieStore.get" : $cookieStore.get('obj'), 'cookies.dotobject' : $cookies.obj, };
    }
  </script>

</body>
</html>

步骤是:

  1. 包括angular.js
  2. 包括angular-cookies.js
  3. 注入ngCookies您的应用程序模块(并确保您在ng-app属性中引用该模块)
  4. 向控制器添加$cookies$cookieStore参数
  5. 使用点 (.) 运算符访问 cookie 作为成员变量 -- 或 --
  6. cookieStore使用 put/get 方法访问
于 2012-06-11T18:47:24.847 回答
71

这是您可以设置和获取 cookie 值的方式。当我发现这个问题时,这就是我最初寻找的。

注意我们使用$cookieStore而不是$cookies

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-1.0.0rc10.js"></script>
  <script src="http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js"></script>
  <script>
    angular.module('myApp', ['ngCookies']);
    function CookieCtrl($scope, $cookieStore) {
      $scope.lastVal = $cookieStore.get('tab');

      $scope.changeTab = function(tabName){
          $scope.lastVal = tabName;
          $cookieStore.put('tab', tabName);
      };
    }
  </script>
</head>
<body ng-controller="CookieCtrl">
    <!-- ... -->
</body>
</html>
于 2013-04-04T17:18:43.630 回答
48

Angular在 1.4.x 版本中已弃用 ,因此如果您使用的是最新版本的 Angular,请改用。&的语法保持不变: $cookieStore$cookies$cookieStore$cookies

$cookies.put("key", "value"); 
var value = $cookies.get("key");

有关API 概述,请参阅文档。还请注意,cookie 服务已通过一些新的重要功能得到增强,例如设置过期(请参阅此答案)和域(请参阅CookiesProvider 文档)。

请注意,在 1.3.x 或更低版本中,$cookies 的语法与上述不同:

$cookies.key = "value";
var value = $cookies.value; 

此外,如果您使用的是 bower,请确保正确输入您的包名称:

bower install angular-cookies@X.Y.Z 

其中 XYZ 是您正在运行的 AngularJS 版本。bower“angular-cookie”中还有另一个包(没有“s”),它不是官方的 angular 包。

于 2015-05-12T21:54:43.200 回答
14

仅供参考,我使用$cookieStore两个控制器 a$rootScope和 AngularjS 1.0.6 组合了一个 JSFiddle。如果你在搞乱这个,它在 JSFifddle 上作为http://jsfiddle.net/krimple/9dSb2/作为基础......

它的要点是:

Javascript

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

myApp.controller('CookieCtrl', function ($scope, $rootScope, $cookieStore) {
    $scope.bump = function () {
        var lastVal = $cookieStore.get('lastValue');
        if (!lastVal) {
            $rootScope.lastVal = 1;
        } else {
            $rootScope.lastVal = lastVal + 1;
        }
        $cookieStore.put('lastValue', $rootScope.lastVal);
    }
});

myApp.controller('ShowerCtrl', function () {
});

HTML

<div ng-app="myApp">
    <div id="lastVal" ng-controller="ShowerCtrl">{{ lastVal }}</div>
    <div id="button-holder" ng-controller="CookieCtrl">
        <button ng-click="bump()">Bump!</button>
    </div>
</div>
于 2013-07-11T15:47:22.930 回答
11

http://docs.angularjs.org/api/ngCookies.$cookieStore

确保包含http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js以使用它。

于 2012-06-09T20:40:35.800 回答
3

AngularJS 提供了 ngCookies 模块和 $cookieStore 服务来使用浏览器 Cookie。

我们需要添加 angular-cookies.min.js 文件来使用 cookie 功能。

这是AngularJS Cookie的一些方法。

  • 获取(键);// 此方法返回给定 cookie 键的值。

  • 获取对象(键);//此方法返回给定cookie键的反序列化值。

  • 得到所有(); //此方法返回一个包含所有cookie的键值对象。

  • 放(键,值,[选项]);//此方法为给定的cookie键设置一个值。

  • 删除(键,[选项]);//此方法删除给定的cookie。

例子

html

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular-cookies.min.js"></script>
</head>
<body ng-controller="MyController">
{{cookiesUserName}} loves {{cookietechnology}}.
</body>
</html>

JavaScript

var myApp = angular.module('myApp', ['ngCookies']);
myApp.controller('MyController', ['$scope', '$cookies', '$cookieStore', '$window', function($scope, $cookies, $cookieStore, $window) {
$cookies.userName = 'Max Joe';
$scope.cookiesUserName = $cookies.userName;
$cookieStore.put('technology', 'Web');
$scope.cookietechnology = $cookieStore.get('technology'); }]);

我已从http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php参考。

于 2015-10-02T03:19:41.867 回答
3

添加 angular cookie 库:angular-cookies.js

您可以将 $cookies 或 $cookieStore 参数用于相应的控制器

主控制器添加此注入“ngCookies”:

angular.module("myApp", ['ngCookies']);

像这样在控制器中使用 Cookie:

 app.controller('checkoutCtrl', function ($scope, $rootScope, $http, $state, $cookies) { 

//store cookies

 $cookies.putObject('final_total_price', $rootScope.fn_pro_per);

//Get cookies

 $cookies.getObject('final_total_price'); }
于 2016-11-30T06:01:11.623 回答
1

最初接受的答案提到jquery.cookie plugin。几个月前,它被重命名为js-cookie并删除了 jQuery 依赖项。原因之一只是为了便于与其他框架集成,比如 Angular。

现在,如果你想将js-cookie与 angular 集成,就像这样简单:

module.factory( "cookies", function() {
  return Cookies.noConflict();
});

就是这样。没有 jQuery。没有 ngCookies。


您还可以创建自定义实例来处理以不同方式编写的特定服务器端 cookie。以 PHP 为例,它将服务器端的空格转换为加号+,而不是对其进行百分比编码:

module.factory( "phpCookies", function() {
  return Cookies
    .noConflict()
    .withConverter(function( value, name ) {
      return value
            // Decode all characters according to the "encodeURIComponent" spec
            .replace(/(%[0-9A-Z]{2})+/g, decodeURIComponent)
            // Decode the plus sign to spaces
            .replace(/\+/g, ' ')
    });
});

自定义 Provider 的用法是这样的:

module.service( "customDataStore", [ "phpCookies", function( phpCookies ) {
  this.storeData = function( data ) {
    phpCookies.set( "data", data );
  };
  this.containsStoredData = function() {
    return phpCookies.get( "data" );
  }
}]);

我希望这对任何人都有帮助。

请参阅此问题中的详细信息:https ://github.com/js-cookie/js-cookie/issues/103

有关如何与服务器端集成的详细文档,请参见此处:https ://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

于 2015-10-10T20:56:14.833 回答
1

这是一个使用 $cookies 的简单示例。单击按钮后,cookie 被保存,然后在页面重新加载后恢复。

应用程序.html:

<html ng-app="app">
<head>
    <meta charset="utf-8" />
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-cookies.js"></script>
    <script src="app.js"></script>
</head>
<body ng-controller="appController as vm">

    <input type="text" ng-model="vm.food" placeholder="Enter food" />

    <p>My favorite food is {{vm.food}}.</p>

    <p>Open new window, then press Back button.</p>
    <button ng-click="vm.openUrl()">Open</button>
</body>
</html>

应用程序.js:

(function () {
    "use strict";

    angular.module('app', ['ngCookies'])
    .controller('appController', ['$cookies', '$window', function ($cookies, $window) {
        var vm = this;

        //get cookie
        vm.food = $cookies.get('myFavorite');

        vm.openUrl = function () {
            //save cookie
            $cookies.put('myFavorite', vm.food);
            $window.open("http://www.google.com", "_self");
        };
    }]);

})();
于 2017-03-20T15:20:10.047 回答