如何在AngularJS中访问cookie？

什么是AngularJS访问cookie的方式？ 我已经看到一个服务和一个模块的cookie的引用，但没有例子。

有没有，还是没有AngularJS规范的方法？

这个答案已经更新，以反映最新的稳定的angularjs版本。 一个重要的注意事项是$cookieStore是一个包装$cookies包装。 他们几乎是一样的，他们只使用会话cookie。 虽然这回答了原来的问题，但是还有其他解决scheme可能需要考虑，比如使用localstorage或者jquery.cookie插件（这会给你更细粒度的控制并且使用cookies来做cookies）。可能会想把它们包装在一个服务中，并使用$scope.apply来通知模型的变化（在某些情况下）。

还有一点需要注意的是，如果您使用$cookie来存储数值或$cookieStore ，那么在提取数据时两者之间会有细微的差别。 当然，你真的想要使用一个或另一个。

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

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

你应该好好去。

这里是一个function最小的例子，在那里我显示cookieStore是一个薄cookies周围的cookies： 

 <!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. 使用点（。）运算符作为成员variables访问cookie – 或 –
  6. 使用put / get方法访问cookieStore

这是如何设置和获取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>

在版本1.4.x中不赞成使用 $cookieStore ，所以如果您使用的是最新版本的angular，请使用$cookies 。 $cookieStore ＆ $cookies语法保持不变： 

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

查看文档获取API概述。 还要注意，cookie服务已经增加了一些新的重要function，如设置过期（请参阅此答案 ）和域（请参阅CookieProvider文档 ）。

请注意，在1.3.x或更低版本中，$ cookie与上面的语法不同： 

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

另外，如果您正在使用凉亭，请确保正确input您的包名称： 

 bower install angular-cookies@XYZ

其中XYZ是您正在运行的AngularJS版本。 还有另一个包装在凉亭“angularcookies”（没有's'），这不是正式的angular包。

仅供参考，我使用$cookieStore ，两个控制器，一个$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>

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

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

AngularJS提供了ngCookies模块和$ cookieStore服务来使用Browser Cookies。

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

这里是AngularJS Cookie的一些方法。

  • 获得（键）; //这个方法返回给定的cookie密钥的值。

  • 的getObject（键）; //此方法返回给定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参考。;

添加angularcookies库：angular-cookies.js

您可以使用$ cookie或$ cookieStore参数到相应的控制器

主控制器添加这个注入'ngCookies'： 

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

像这样在你的控制器中使用Cookies： 

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

原来接受的答案提到jquery.cookie插件 。 几个月前，虽然它被重命名为js-cookie和jQuery依赖关系被删除。 其中一个原因就是为了方便与Angular等其他框架集成。

现在，如果您想要将js-cookie与angular度整合，就像下面这样简单： 

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

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

您也可以创build自定义实例来处理以不同方式写入的特定服务器端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, ' ') }); });

自定义提供程序的用法如下所示： 

 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

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

app.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>

app.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"); }; }]); })();
    Interesting Posts

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