Як отримати доступ до файлів cookie в AngularJS?

236

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

Є чи не існує канонічного підходу AngularJS?

angularjs angular-cookies

— Елліс Уайтхед
джерело

1

Чудова річ у angularjs - це з-за аспекту її введення залежності, ви можете знущатися над такими речами, як ngCookies для тестування одиниць. Дякуємо за те, що ви зробили свої кроки.

— Ден Дойон

5

@DanDoyon Я намагаюся переробити те саме, але в app.js всередині config. але я отримую "Невірна помилка: Невідомий постачальник: $ cookies" будь-яку підказку.

— Ананд

@ sutikshan-dubey тільки побачивши ваше запитання, чи можете ви надати зразок коду?

— Дан Дойон

@DanDoyon Дякую cookie не вирішили мою ціль, stackoverflow.com/questions/12624181/… Я виправив це за допомогою веб-сховища. Це мені дуже допомогло - people.opera.com/shwetankd/external/demos/webstorage_demo.htm

— Ананд

1

будь ласка, опублікуйте відповідь як відповідь, а не вкладаючи її у запитання.

— Еліран Малька

200

Цю відповідь було оновлено, щоб відобразити останню стабільну версію angularjs. Важлива примітка - $cookieStoreце оточення тонкої обгортки $cookies. Вони майже однакові тим, що працюють лише з файлами cookie сеансу. Хоча це відповідає на початкове запитання, є й інші рішення, які ви можете розглянути, як-от використання локального сховища або плагіна 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 як змінної члена за допомогою оператора dot (.) - АБО -
доступ cookieStoreза допомогою методів put / get

— Ден Дойон
джерело

4

Ця відповідь більше не працює, замість цього вам потрібно використовувати $ cookieStore, як описано в іншій відповіді.

— Білл

Дякуємо @Bill, ти, мабуть, маєш рацію, з 1,2 речі, швидше за все, змінилися. Я його оновив.

— Ден Дойон

Я оновив відповідь і @Bill $ cookieStore, мабуть, простіше у використанні, але $ cookies все ще працює трохи інакше

— Dan Doyon

1

Я думаю, що при використанні localhost та файлів cookie є проблеми. Якщо ви використовуєте ім'я машини замість localhost, ви можете мати кращий успіх.

— Ден Дойон

18

Використовуйте $ cookies, $ cookieStore тепер застаріло

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

— Урі
джерело

45

Кутовий застарілий $cookieStore у версії 1.4.x, тому використовуйте $cookiesнатомість, якщо ви використовуєте останню версію кутової. Синтаксис залишається однаковим для $cookieStore& $cookies:

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

Див. Документи для огляду API. Зауважте також, що послугу cookie було покращено деякими новими важливими функціями, такими як встановлення терміну дії (див. Цю відповідь ) та домену (див. Cookies Документи CookiesProvider ).

Зауважте, що у версії 1.3.x або нижче, файли cookie $ мають інший синтаксис, ніж вище:

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

Крім того, якщо ви використовуєте bower, переконайтеся, що правильно введіть назву пакета:

bower install angular-cookies@X.Y.Z

де XYZ - версія AngularJS, яку ви працюєте. Є ще один пакунок у "bogular cookie" (без "s"), який не є офіційним кутовим пакетом.

— Maksood
джерело

14

FYI, я склав 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

— Елліс Уайтхед

На жаль, я ніколи його не використовував, просто знаю, що він існує. Можливо, вам слід попросити групи Angular google для швидшої відповіді. groups.google.com/forum/#!forum/angular

— Ендрю Джослін

3

Виявляється, $cookieStoreмабуть, в основному призначені для створених клієнтом файлів cookie. Для доступу до файлів cookie, створених сервером, мені довелося використовувати $cookiesзамість цього.

— Елліс Уайтхед

7

URL-адреса застаріла - в наш час у кутовому CDN Googles розміщено кутові файли cookie, тут: 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

Хоча ця відповідь більше року , і зв'язок корисно було б краще , якщо ви розмістите основні частини відповіді тут, на цьому сайті, або ваше повідомлення ризикує бути видалений см довідку , де він згадує відповіді, які «трохи - трохи більше , ніж посилання '. Ви можете все-таки включити посилання за бажанням, але лише як "посилання". Відповідь має стояти самостійно, не потребуючи посилання.

— Taryn

3

AngularJS надає модуль ngCookies та сервіс $ cookieStore для використання браузерних файлів cookie.

Для використання функції cookie нам потрібно додати файл angular-cookies.min.js.

Ось деякі методи куки AngularJS.

дістати (ключ); // Цей метод повертає значення заданого ключа cookie.
getObject (ключ); // Цей метод повертає деріаріалізоване значення заданого ключа cookie.
getAll (); // Цей метод повертає об'єкт ключового значення з усіма файлами cookie.
put (ключ, значення, [параметри]); // Цей метод встановлює значення для даного ключа 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 .

— Маніш
джерело

3

Додайте кутову вкладку cookie: 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'); }

— Анкур Рададія
джерело

1

В оригінальній прийнятій відповіді згадується плагін jquery.cookie . Кілька місяців тому він був перейменований на js-cookie, а залежність jQuery видалена. Однією з причин була просто спрощення інтеграції з іншими рамками, такими як Angular.

Тепер, якщо ви хочете інтегрувати js-cookie з кутовим, це так просто, як щось на зразок:

module.factory( "cookies", function() {
  return Cookies.noConflict();
});

І це все. Немає jQuery. Ні ngCookie.

Ви також можете створити спеціальні екземпляри для обробки певних файлів 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/isissue/103

Докладні документи про інтеграцію з сервером див. Тут: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

— Fagner Brack
джерело

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

})();

— живе-кохання
джерело