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

236

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

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

angularjs angular-cookies Эллис Уайтхед
источник

1

Отличительной особенностью angularjs является то, что благодаря аспекту внедрения зависимостей, вы можете смоделировать такие вещи, как ngCookies для модульного тестирования. Спасибо за ваши шаги.

Дэн Дойон

5

@DanDoyon Я пытаюсь реализовать то же самое, но в app.js внутри конфигурации. но я получаю "Uncaught Error: Unknown Provider: $ cookies" любую подсказку.

Ананд

@ sutikshan-dubey просто вижу ваш вопрос, можете ли вы предоставить пример кода?

Дэн Дойон

@DanDoyon Спасибо. куки не решили мою задачу, stackoverflow.com/questions/12624181/… Я исправил это с помощью веб-хранилища. Это мне очень помогло - people.opera.com/shwetankd/external/demos/webstorage_demo.htm

Ананд

1

пожалуйста, опубликуйте ответ как ответ, а не встраивайте его в вопрос.

Элиран Малка

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>

Шаги:

включают angular.js
включают angular-cookies.js
внедрить ngCookiesв свой модуль приложения (и убедитесь, что вы ссылаетесь на этот модуль в ng-appатрибуте)
добавить $cookiesили $cookieStoreпараметр в контроллер
получить доступ к cookie как к переменной-члену, используя оператор точки (.) - ИЛИ -
доступ cookieStoreс использованием методов put / get

Дэн Дойон
источник

4

Этот ответ больше не работает, вам нужно использовать $ cookieStore, как описано в другом ответе.

Билл

Спасибо @Bill, вы, вероятно, правы, с 1,2 вещи, скорее всего, изменились. Я обновлю это.

Дэн Дойон

Я обновил ответ, и @Bill $ cookieStore, вероятно, проще в использовании, но $ cookies по-прежнему работает немного иначе

Дэн Дойон

1

Я думаю, что есть проблемы при использовании localhost и куки). Если вы используете имя вашего компьютера вместо localhost, вы можете добиться большего успеха.

Дэн Дойон

18

Используйте $ cookies, $ cookieStore устарел

Никлас Экман

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>

Uri
источник

45

Angular устарела $cookieStore в версии 1.4.x, поэтому используйте $cookiesвместо этого, если вы используете последнюю версию angular. Синтаксис остается неизменным для $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

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

Maksood
источник

14

К вашему сведению, я собрал JSFiddle, используя $cookieStoreдва контроллера a $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>

Кен Римпл
источник

11

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

Эллис Уайтхед

К сожалению, я никогда не использовал его, я просто знаю, что он существует. Может быть, вам следует обратиться к группе Google Angular за более быстрым ответом. groups.google.com/forum/#!forum/angular

Эндрю Джослин,

3

Оказывается, это, $cookieStoreпо-видимому, в основном предназначено для клиентских файлов cookie. Чтобы получить доступ к сгенерированным сервером куки, я должен был использовать $cookiesвместо этого.

Эллис Уайтхед

7

URL-адрес устарел - в настоящее время angular-cookies - размещен на Googles 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 для использования файлов cookie браузера.

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

Вот несколько методов AngularJS Cookie.

получить (ключ); // Этот метод возвращает значение данного ключа cookie.
GetObject (ключ); // Этот метод возвращает десериализованное значение данного ключа cookie.
получить все(); // Этот метод возвращает объект значения ключа со всеми файлами cookie.
положить (ключ, значение, [параметры]); // Этот метод устанавливает значение для данного ключа 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 .

Manish
источник

3

Добавьте угловой файл 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'); }

Анкур Рададия
источник

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.

Фагнер Брак
источник

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");
        };
    }]);

})();

живи любя
источник

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

Ответы: