Как получить доступ к куки в AngularJS?

214

Какой способ AngularJS для доступа к файлам cookie? Я видел ссылки как на службу, так и на модуль для куки файлов, но примеров не было.

Есть ли, или нет канонического подхода AngularJS?

  • 1
    Отличительной особенностью angularjs является то, что благодаря аспекту внедрения зависимостей, вы можете смоделировать такие вещи, как ngCookies для модульного тестирования. Спасибо за ваши шаги.
  • 5
    @DanDoyon Я пытаюсь реализовать то же самое, но в app.js внутри конфигурации. но я получаю "Uncaught Error: Неизвестный поставщик: $ cookies" любую подсказку.
Показать ещё 4 комментария
Теги:

9 ответов

201
Лучший ответ

Этот ответ был обновлен, чтобы отразить последнюю стабильную версию angularjs. Важно отметить, что $cookieStore представляет собой тонкую оболочку, окружающую $cookies. Они почти одинаковы, поскольку они работают только с сеансовыми файлами. Хотя, это отвечает на исходный вопрос, есть другие решения, которые вы, возможно, пожелаете рассмотреть, например, использование localstorage или jquery.cookie plugin (что даст вам более тонкий контроль и сделает 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 как переменной-члену с помощью оператора dot (.) - ИЛИ -
  • доступ cookieStore с использованием методов put/get
Поделиться
  • 2
    Спасибо, я отредактировал свой вопрос, показав полный рабочий пример.
  • 4
    Этот ответ больше не работает, вместо этого вам нужно использовать $ cookieStore, как описано в другом ответе.
Показать ещё 8 комментариев
66

Вот как вы можете установить и получить значения cookie. Это то, что я изначально искал, когда нашел этот вопрос.

Обратите внимание, что вместо $cookies

мы используем $cookieStore 
<!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>
Поделиться
39

Angular устаревший $cookieStore в версии 1.4.x, поэтому используйте $cookies, если вы используете последнюю версию angular. Синтаксис остается таким же для $cookieStore и $cookies:

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

См. Docs для обзора API. Имейте в виду, что служба cookie была дополнена некоторыми новыми важными функциями, такими как установка срока действия (см. этот ответ) и домен (см. CookiesProvider Docs).

Обратите внимание, что в версии 1.3.x или ниже $cookie имеет другой синтаксис, чем указано выше:

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

Также, если вы используете беседку, обязательно введите имя своего пакета правильно:

bower install [email protected]

где X.Y.Z - версия AngularJS, которую вы используете. Там другой пакет в bower "angular -cookie" (без "s" ), который не является официальным пакетом angular.

Поделиться
12

FYI, я собрал JSFiddle из этого, используя $cookieStore, два контроллера, $rootScope и AngularjS 1.0.6. Это на 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>
Поделиться
10

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

Убедитесь, что вы включили http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js, чтобы использовать его.

Поделиться
  • 2
    Не могли бы вы дать подсказку о том, как получить к нему доступ, или ссылку на документацию, которая мне нужна, чтобы выяснить это? После включения файла angular-cookies.js в мой HTML я добавил $cookieStore к подписи моего контроллера (то есть function AccountCtrl($scope, $cookieStore) ), но затем получил следующее сообщение об ошибке: Неизвестный поставщик: $ cookieStoreProvider < - $ cookieStore
  • 0
    К сожалению, я никогда не использовал его, я просто знаю, что он существует. Возможно, вам следует обратиться к группе Google Angular за более быстрым ответом. groups.google.com/forum/#!forum/angular
Показать ещё 3 комментария
2

Добавить angular cookie lib: 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'); }
Поделиться
2

AngularJS предоставляет модуль ngCookies и $cookieStore для использования Cookies в браузере.

Нам нужно добавить файл angular -cookies.min.js, чтобы использовать функцию cookie.

Вот какой-то метод AngularJS Cookie.

  • прибудет (ключ);//Этот метод возвращает значение данного ключа cookie.

  • GetObject (ключ);//Этот метод возвращает десериализованное значение данного cookie.

  • GETALL();//Этот метод возвращает объект значения ключа со всеми печенье.

  • put (ключ, значение, [опции]);//Этот метод устанавливает значение для данного cookie.

  • remove (ключ, [опции]);//Этот метод удаляет данный 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.

Поделиться
1

Вот простой пример использования $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");
        };
    }]);

})();
Поделиться
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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню