如何访问AngularJS中的cookie？

时间：2012-06-09 14:50:48

标签： angularjs angular-cookies

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

是否存在或者没有AngularJS规范方法？

9 个答案:

答案 0 :(得分：197)

此答案已更新，以反映最新稳定的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. 使用put / get方法访问cookieStore

答案 1 :(得分：70)

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

答案 2 :(得分：43)

版本1.4.x中的

Angular 已弃用 $cookieStore，因此如果您使用的是最新版本的角色，请使用$cookies。 $cookieStore＆amp;的语法保持不变$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 install angular-cookies@X.Y.Z

其中X.Y.Z是您正在运行的AngularJS版本。 凉亭里的另一个套餐“angular-cookie”（没有's'）不是官方的角度套餐。

答案 3 :(得分：12)

仅供参考，我使用$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 :(得分：10)

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

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

答案 5 :(得分：2)

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

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

以下是AngularJS Cookie的一些方法。

  • GET（键）; //此方法返回给定cookie密钥的值。

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

  • GETALL（）; //此方法返回一个包含所有键值的对象 饼干。

  • put（key，value，[options]）; //此方法设置给定的值 cookie密钥。

  • remove（key，[options]）; //此方法删除给定的cookie。

示例

<强> HTML 

<form action="hitungmakan.php" method="post"><center>
<table border="1" width="400" cellpadding="3">
<tr><td colspan="5" align="center">Menu Makan dan Minum</td></tr>
<tr><td align="center">Makanan</td>  <tdalign="center">Minuman</td></tr>        
<tr>
<td><input name="makanan[]" type="checkbox" value="nasgor">nasi goreng $.7000<br>
<input name="makanan[]" type="checkbox" value="wuduk">wuduk $.6000<br>
<input name="makanan[]" type="checkbox" value="pecel">pecel $.9000</td>
<td><input name="minuman[]" type="checkbox" value="tehbotol">teh botol $.3000<br>
<input name="minuman[]" type="checkbox" value="campur">es campur $.7000<br>
<input name="minuman[]" type="checkbox" value="jeruk">es jeruk $.6000</td>
</tr>
<input type="submit" value="Total" name="total">
<input type="reset" value="Batal">

<强>的JavaScript 

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

我从http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php获取了参考资料。

答案 6 :(得分：2)

添加角度曲奇饼库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'); }

答案 7 :(得分：1)

最初接受的答案提及jquery.cookie plugin。几个月前，它被重命名为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

答案 8 :(得分：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");
        };
    }]);

})();
相关问题
最新问题