如何在AngularJS中访问cookie？

236

AngularJS访问cookie的方式是什么？我已经看到过针对Cookie的服务和模块的引用，但没有示例。

有没有，或者没有AngularJS规范方法？

angularjs  angular-cookies 
— 埃利斯·怀特黑德
source
1
angularjs的优点在于它的依赖注入方面，您可以将ngCookies之类的东西模拟出来进行单元测试。多谢您采取步骤。
— Dan Doyon 2012年
5
@DanDoyon我正在尝试实现相同的功能，但是在config内部的app.js中。但是我得到“任何提示错误：未知的提供程序：$ cookies”。
— 阿南德
@ sutikshan-dubey看到您的问题，您可以提供代码示例吗？
— Dan Doyon 2012年
@DanDoyon谢谢。Cookies不能解决我的问题，stackoverflow.com/ questions/12624181/… 我使用网络存储对其进行了修复。这对我很有帮助-people.opera.com/shwetankd/external/demos/webstorage_demo.htm
— Anand
1
请发布答案作为答案，而不是将其嵌入问题中。
— 伊莱兰·马尔卡

Answers:

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方法访问
— 丹·多永
source
4
该答案不再起作用，您需要使用$ cookieStore，如另一个答案中所述。
— 条例草案
感谢@Bill，您可能是正确的，最有可能更改了1.2。我将更新它。
— Dan Doyon 2013年
我更新了答案，@ Bill $ cookieStore可能更易于使用，但$ cookies仍然有一点不同
— Dan Doyon 2014年
1
我认为使用localhost和Cookies时会出现问题。如果使用计算机名而不是localhost，则可能会获得更好的成功。
— Dan Doyon
18
— Niklas Ekman
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>
— 宇里
source
45

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

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

有关API概述，请参见文档。还请注意，cookie服务已通过一些新的重要功能得到了增强，例如设置过期时间（请参阅此答案）和域（请参见CookiesProviderDocs）。

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

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

另外，如果您使用的是凉亭，请确保正确输入软件包名称： 

bower install angular-cookies@X.Y.Z

其中XYZ是您正在运行的AngularJS版本。凉亭“ angular-cookie”中还有另一个软件包（不带“ s”），它不是官方的角度软件包。

— Maksood
source
14

仅供参考，我使用$cookieStore，两个控制器a $rootScope和AngularjS 1.0.6 对此进行了JSFiddle组合。它在JSFifddle上为http://jsfiddle.net/krimple/9dSb2/如果您正在使用作为基础...

其要点是：

Java脚本

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>
— 肯·鲁普
source
11

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

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

— 安德鲁·乔斯林
source
2
您能否提供有关如何访问它的提示，或者我需要找出指向哪些文档的链接？在HTML中包含angular-cookies.js文件之后，我添加$cookieStore了控制器的签名（即function AccountCtrl($scope, $cookieStore)），但随后收到以下错误消息：未知提供程序：$ cookieStoreProvider <-$ cookieStore
— Ellis Whitehead
不幸的是，我从未使用过它，我只是知道它的存在。也许您应该在Angular谷歌论坛上要求更快的响应。groups.google.com/forum/#!forum/angular
— Andrew Joslin
3
事实证明，这$cookieStore显然主要用于客户端生成的cookie。要访问服务器生成的cookie，我不得不使用它$cookies。
— 艾利斯·怀特海德2012年
7
该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
1
虽然此答案已有一年多的历史了，并且该链接很有用，但是如果您在此处，此网站上发布答案的基本部分，或者删除帖子的风险会更好，请参阅FAQ，其中提到的答案“很少”比链接”。如果愿意，您仍可以包括该链接，但仅作为“参考”。答案应该独立存在，不需要链接。
— 塔林
3

AngularJS提供ngCookies模块和$ cookieStore服务以使用浏览器Cookies。

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

这是AngularJS Cookie的一些方法。

  • get（key）; //此方法返回给定cookie键的值。

  • getObject（key）; //此方法返回给定cookie键的反序列化值。

  • 得到所有（）; //此方法返回包含所有cookie的键值对象。

  • put（键，值，[选项]）; //此方法为给定的cookie键设置一个值。

  • remove（key，[options]）; //此方法删除给定的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中获取了参考。

— 曼尼什
source
3

添加角度cookie库：angular-cookies.js

您可以对相应的控制器使用$ cookies或$ 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'); }
— 安库·拉达迪亚（Ankur Ra​​dadiya）
source
1

最初接受的答案提到jquery.cookie插件。但是，几个月前，它已重命名为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

— 法格纳·布拉克（Fagner Brack）
source
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");
        };
    }]);

})();
— 真爱
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.