如何在 AngularJS 中访问 cookie？
Posted
技术标签:
【中文标题】如何在 AngularJS 中访问 cookie？【英文标题】：How to access cookies in AngularJS? 【发布时间】：2012-06-13 06:53:39 【问题描述】：AngularJS 访问 cookie 的方式是什么？我已经看到了对 cookie 的服务和模块的引用，但没有示例。
有，还是没有 AngularJS 规范的方法？
【问题讨论】：
angularjs 的伟大之处在于它的依赖注入方面，您可以模拟 ngCookies 之类的东西进行单元测试。感谢您的努力。 @DanDoyon 我试图在 app.js 中的配置中实现相同的东西。但我得到“未捕获的错误：未知的提供者：$cookies”任何线索。 @sutikshan-dubey 刚看到你的问题，你能提供代码示例吗？ @DanDoyon 谢谢。 cookie 没有解决我的问题，***.com/questions/12624181/… 我使用网络存储修复了它。这对我帮助很大 - people.opera.com/shwetankd/external/demos/webstorage_demo.htm 请将答案发布为答案，而不是将其嵌入问题中。 【参考方案1】：这是一个使用 $cookies 的简单示例。点击按钮后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");
;
]);
)();
【讨论】：
【参考方案2】：添加 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');
【讨论】：
【参考方案3】：仅供参考，我使用 $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>
【讨论】：
【参考方案4】：此答案已更新以反映最新的稳定 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>
步骤如下：
-
包括
angular.js
包括angular-cookies.js
将ngCookies 注入您的应用模块（并确保在ng-app 属性中引用该模块）
向控制器添加$cookies 或$cookieStore 参数
使用点 (.) 运算符将 cookie 作为成员变量访问
-- 或者 --
使用 put/get 方法访问 cookieStore
【讨论】：
此答案不再有效，您需要使用 $cookieStore 代替，如另一个答案中所述。 谢谢@Bill，你可能是对的，1.2 的东西很可能已经改变了。我会更新的。 我更新了答案，@Bill $cookieStore 可能更易于使用，但 $cookies 的工作方式仍然略有不同 我认为使用 localhost 和 cookie 时存在问题）。如果您使用您的机器名称而不是 localhost，您可能会获得更好的成功。 使用 $cookies，$cookieStore is now deprecated【参考方案5】：最初接受的答案提到jquery.cookie plugin。不过几个月前，它被重命名为js-cookie，并且移除了 jQuery 依赖项。原因之一就是为了便于与其他框架（如 Angular）集成。
现在，如果你想将 js-cookie 与 angular 集成，就像这样简单：
module.factory( "cookies", function()
return Cookies.noConflict();
);
就是这样。没有 jQuery。没有 ngCookie。
您还可以创建自定义实例来处理以不同方式编写的特定服务器端 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
【讨论】：
【参考方案6】：AngularJS 提供 ngCookies 模块和 $cookieStore 服务来使用浏览器 Cookie。
我们需要添加 angular-cookies.min.js 文件来使用 cookie 功能。
这是AngularJS Cookie的一些方法。
获取（键）； // 此方法返回给定 cookie 键的值。
getObject(key); //该方法返回给定的反序列化值 cookie 密钥。
getAll(); //此方法返回一个键值对象，其中包含所有 饼干。
put(key, value, [options]); //此方法为给定设置一个值 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。
【讨论】：
【参考方案7】：Angular deprecated $cookieStore 在 1.4.x 版本中，所以如果您使用最新版本的 Angular，请改用 $cookies。 $cookieStore & $cookies 的语法保持不变：
$cookies.put("key", "value");
var value = $cookies.get("key");
有关 API 概述，请参阅 Docs。另请注意，cookie 服务已通过一些新的重要功能得到增强，例如设置过期（请参阅this answer）和域（请参阅CookiesProvider Docs）。
请注意，在 1.3.x 或更低版本中，$cookies 的语法与上述不同：
$cookies.key = "value";
var value = $cookies.value;
此外，如果您使用的是 bower，请确保正确输入您的包名称：
bower install angular-cookies@X.Y.Z
其中 X.Y.Z 是您正在运行的 AngularJS 版本。 在凉亭“angular-cookie”（没有“s”）中还有另一个包，它不是官方的 angular 包。
【讨论】：
【参考方案8】：这是您可以设置和获取 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>
【讨论】：
【参考方案9】：http://docs.angularjs.org/api/ngCookies.$cookieStore
确保包含 http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js 以使用它。
【讨论】：
您能否提供有关如何访问它的提示，或提供我需要解决此问题的文档的链接？在我的 HTML 中包含 angular-cookies.js 文件后，我在控制器的签名中添加了$cookieStore（即 function AccountCtrl($scope, $cookieStore)），但随后收到以下错误消息：未知提供者：$cookieStoreProvider
不幸的是，我从未使用过它，我只知道它存在。也许您应该在 Angular 谷歌小组上询问以获得更快的回复。 groups.google.com/forum/#!forum/angular
事实证明，$cookieStore 显然主要用于客户端生成的 cookie。要访问服务器生成的 cookie，我不得不改用 $cookies。
URL 已经过时了——现在，angular-cookies- 托管在 Google 的 CDN 上，这里：ajax.googleapis.com/ajax/libs/angularjs/1.0.1/… (https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-cookies.min.js) 见博文：blog.angularjs.org/2012/07/…
虽然这个答案已经有一年多了，而且这个链接很有帮助，但如果你在这个网站上发布答案的基本部分会更好，或者你的帖子有被删除的风险See the FAQ where it mentions answers that are 'barely more than a link'.你如果您愿意，仍然可以包含该链接，但仅作为“参考”。答案应该是独立的，不需要链接。以上是关于如何在 AngularJS 中访问 cookie？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 AngularJS 访问位于不同 js 文件中的变量数据