Como acessar cookies no AngularJS?

236

Qual é a maneira do AngularJS de acessar cookies? Vi referências a um serviço e a um módulo para cookies, mas não há exemplos.

Existe ou não existe uma abordagem canônica do AngularJS?

angularjs angular-cookies Ellis Whitehead
fonte
1
O melhor de angularjs é que, devido ao aspecto da injeção de dependência, você pode zombar de coisas como ngCookies para testes de unidade. Obrigado por dar os seus passos.
precisa
5
@ DanDoyon Estou tentando impulsionar a mesma coisa, mas no app.js dentro da configuração. mas estou recebendo "Erro não capturado: provedor desconhecido: $ cookies" qualquer pista.
Anand
@ sutikshan-dubey acabou de ver sua pergunta, você pode fornecer um exemplo de código?
Dan Doyon
@DanDoyon Thanks. os cookies não resolveram meu problema, stackoverflow.com/questions/12624181/… Corrigi -o usando armazenamento na web. Isso me ajudou muito - people.opera.com/shwetankd/external/demos/webstorage_demo.htm
Anand
1
poste a resposta como resposta em vez de incorporá-la à pergunta.
Eliran Malka

Respostas:

200

Esta resposta foi atualizada para refletir a versão mais recente e estável do angularjs. Uma observação importante é que $cookieStoreé um invólucro fino ao redor $cookies. Eles são praticamente iguais, pois trabalham apenas com cookies de sessão. Embora isso responda à pergunta original, há outras soluções que você pode considerar, como usar o armazenamento local ou o plug-in jquery.cookie (que daria a você um controle mais refinado e fará cookies no servidor. É claro que fazê-lo em angularjs significa que você provavelmente desejaria envolvê-los em um serviço e usá-lo $scope.applypara notificar angular mudanças nos modelos (em alguns casos).

Uma outra observação e é que há uma pequena diferença entre os dois ao extrair dados, dependendo de se você costumava $cookiearmazenar valor ou $cookieStore. Claro, você realmente gostaria de usar um ou outro.

Além de adicionar referência ao arquivo js, ​​você precisa injetar ngCookiesna definição do aplicativo, como:

angular.module('myApp', ['ngCookies']);

você deve estar pronto para ir.

Aqui está um exemplo funcional mínimo, onde mostro que cookieStoreé um invólucro fino em torno de cookies:

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

Os passos são:

  1. incluir angular.js
  2. incluir angular-cookies.js
  3. injetar ngCookiesno seu módulo de aplicativo (e não se esqueça de referenciar esse módulo no ng-appatributo)
  4. adicione um parâmetro $cookiesou $cookieStoreao controlador
  5. acesse o cookie como uma variável de membro usando o operador ponto (.) - OU -
  6. acessar cookieStoreusando métodos put / get
Dan Doyon
fonte
4
Esta resposta não funciona mais, você precisa usar $ cookieStore, como descrito em outra resposta.
Bill
Obrigado @Bill, você provavelmente está correto, com 1,2 coisas que provavelmente mudaram. Vou atualizá-lo.
Dan Doyon
Eu atualizei a resposta e @Bill $ CookieStore é provavelmente mais fácil de usar, mas $ biscoitos ainda funciona um pouco diferente
Dan Doyon
1
Eu acho que há problemas ao usar o host local e os cookies). Se você usar o nome da sua máquina em vez do localhost, poderá ter um sucesso melhor.
Dan Doyon
18
Use $ cookies, $ cookieStore agora está obsoleto
Niklas Ekman
71

É assim que você pode definir e obter valores de cookies. Era isso que eu estava procurando originalmente quando encontrei essa pergunta.

Observe que usamos em $cookieStorevez de$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
fonte
45

Angular descontinuado $cookieStore na versão 1.4.x, portanto, use-o $cookiesse estiver usando a versão mais recente do angular. A sintaxe permanece a mesma para $cookieStore& $cookies: 

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

Consulte o Documentos para obter uma visão geral da API. Lembre-se também de que o serviço de cookies foi aprimorado com alguns novos recursos importantes, como definir a expiração (consulte esta resposta ) e o domínio (consulte a documentação do CookiesProvider ).

Observe que, na versão 1.3.x ou abaixo, $ cookies possui uma sintaxe diferente da acima: 

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

Além disso, se você estiver usando o caramanchão, certifique-se de digitar o nome do pacote corretamente: 

bower install angular-cookies@X.Y.Z

onde XYZ é a versão do AngularJS que você está executando. Há outro pacote no bower "angular-cookie" (sem os 's') que não é o pacote angular oficial.

Maksood
fonte
14

Para sua informação, montei um JSFiddle disso usando os $cookieStoredois controladores, a $rootScopee AngularjS 1.0.6. Está no JSFifddle como http://jsfiddle.net/krimple/9dSb2/ como base, se você estiver brincando com isso ...

A essência disso é:

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>
Ken Rimple
fonte
11

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

Certifique-se de incluir http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js para usá-lo.

Andrew Joslin
fonte
2
Você poderia fornecer uma dica sobre como acessá-lo ou um link para qual documentação eu preciso descobrir? Depois de incluir o arquivo angular-cookies.js no meu HTML, eu adicionei $cookieStorepara a assinatura do meu controlador (ou seja function AccountCtrl($scope, $cookieStore)), mas, em seguida, receber a seguinte mensagem de erro: Provedor desconhecido: $ cookieStoreProvider <- $ CookieStore
Ellis Whitehead
Infelizmente, nunca o usei, apenas sei que ele existe. Talvez você deva pedir ao grupo do Google Angular uma resposta mais rápida. groups.google.com/forum/#!forum/angular
Andrew Joslin
3
Acontece que, $cookieStoreaparentemente, ele é destinado principalmente a cookies gerados pelo cliente. Para acessar cookies gerados pelo servidor, tive que usar $cookies.
Ellis Whitehead
7
O URL ficou desatualizado - atualmente, angular-cookies - está hospedado no Googles CDN, aqui: ajax.googleapis.com/ajax/libs/angularjs/1.0.1/… ( https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-cookies.min.js) Veja a publicação no blog: blog.angularjs.org /
2012/07
1
Embora esta resposta é mais de um ano de idade e o link é útil que seria melhor se você postar as partes essenciais da resposta aqui, neste site, ou seu post arrisca sendo excluído Veja as FAQ, onde ele menciona respostas que são 'pouco mais do que um link ". Você ainda pode incluir o link, se desejar, mas apenas como uma 'referência'. A resposta deve ser independente, sem a necessidade do link.
Taryn
3

O AngularJS fornece o módulo ngCookies e o serviço $ cookieStore para usar os cookies do navegador.

Precisamos adicionar o arquivo angular-cookies.min.js para usar o recurso de cookie.

Aqui está um método do AngularJS Cookie.

  • get (chave); // Este método retorna o valor da chave de cookie especificada.

  • getObject (chave); // Este método retorna o valor desserializado de uma chave de cookie especificada.

  • getAll (); // Este método retorna um objeto de valor-chave com todos os cookies.

  • put (chave, valor, [opções]); // Este método define um valor para a chave de cookie especificada.

  • remover (chave, [opções]); // Este método remove o cookie fornecido.

Exemplo

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

Tomei referência em http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php .

Manish
fonte
3

Adicionar lib angular de cookie: angular-cookies.js

Você pode usar o parâmetro $ cookies ou $ cookieStore no respectivo controlador

O controlador principal adiciona este injetor 'ngCookies':

angular.module("myApp", ['ngCookies']);

Use cookies no seu controlador da seguinte maneira:

 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 Radadiya
fonte
1

A resposta original aceita menciona o plugin jquery.cookie . Alguns meses atrás, porém, ele foi renomeado para js-cookie e a dependência do jQuery foi removida. Um dos motivos foi apenas para facilitar a integração com outras estruturas, como Angular.

Agora, se você deseja integrar o js-cookie ao angular, é tão fácil quanto algo como:

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

E é isso. Sem jQuery. Nenhum ngCookies.

Você também pode criar instâncias personalizadas para manipular cookies específicos do servidor, escritos de maneira diferente. Tomemos, por exemplo, o PHP, que converte os espaços no lado do servidor em um sinal de mais, em +vez de também o codificar em porcentagem:

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, ' ')
    });
});

O uso de um provedor personalizado seria algo como isto:

module.service( "customDataStore", [ "phpCookies", function( phpCookies ) {
  this.storeData = function( data ) {
    phpCookies.set( "data", data );
  };
  this.containsStoredData = function() {
    return phpCookies.get( "data" );
  }
}]);

Espero que isso ajude alguém.

Veja informações detalhadas nesta edição: https://github.com/js-cookie/js-cookie/issues/103

Para documentos detalhados sobre como integrar com o lado do servidor, consulte aqui: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

Fagner Brack
fonte
1

Aqui está um exemplo simples usando $ cookies. Depois de clicar no botão, o cookie é salvo e restaurado depois que a página é recarregada.

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

})();
amor ao vivo
fonte