如何在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> 

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