如何在AngularJS中访问cookie ?

小开

< a href = " http://docs.angularjs.org/api/ngCookies.%24cookieStore " > http://docs.angularjs.org/api/ngCookies。美元cookieStore < / >

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

小开

最佳答案

这个答案已经更新，以反映最新稳定的angularjs版本。一个重要的注意是$cookieStore是$cookies的一个薄包装器。它们的基本相同之处在于它们只处理会话cookie。虽然这回答了最初的问题，但还有其他解决方案，如使用localstorage或jquery。Cookie插件(它会给你更细粒度的控制，并做服务器端Cookie。当然，在angularjs中这样做意味着你可能想要将它们包装在服务中，并使用$scope.apply来通知angular对模型的更改(在某些情况下)。

另一个注意事项是，在提取数据时，两者之间有轻微的区别，这取决于你是使用$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作为成员变量访问 ——OR——
使用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>

小开

供你参考，我用$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 () {
});

超文本标记语言

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

小开

Angular 1.4版中的弃用 $cookieStore。因此，如果你使用的是angular. x的最新版本，请使用$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

其中X.Y.Z是你正在运行的AngularJS版本。在凉亭"angular-cookie"中还有一个包(没有's')，它不是正式的angular包。< / p >

小开

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

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

下面是AngularJS Cookie的一些方法。

(关键);//该方法返回给定cookie key的值。

put(key, value， [options]);//该方法设置一个给定的值李饼干关键。< / p > < / >
删除(关键,[选项]);//此方法删除给定的cookie。

例子

超文本标记语言

<!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引用。

小开

最初接受的答案提到jquery。饼干插件。几个月前，它被重命名为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, ' ')
});
});

自定义提供者的用法是这样的:

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

小开

添加angular cookie lib: 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'); }

小开

下面是一个使用$cookies的简单示例。单击按钮后，cookie将被保存，重新加载页面后，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");
};
}]);


})();