Como acessar cookies no AngularJS?

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

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

Essa resposta foi atualizada para refletir a última versão estável do angularjs. Uma observação importante é que $cookieStore é um wrapper fino que envolve $cookies . Eles são praticamente os mesmos, pois só funcionam com cookies de session. Embora, isso responda à pergunta original, existem outras soluções que você pode querer considerar, como usar o localstorage, ou o plugin jquery.cookie (que lhe dará um controle mais refinado e fará cookies no servidor. Claro que fazê-lo em angularjs significa que você provavelmente iria querer envolvê-los em um serviço e usar $scope.apply para notificar angular de alterações nos modelos (em alguns casos).

Uma outra nota é que existe uma ligeira diferença entre os dois ao extrair dados dependendo se você usou $cookie para armazenar valor ou $cookieStore . Claro, você realmente quer usar um ou outro.

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

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

você deve então ser bom para ir.

Aqui está um exemplo funcional mínimo, onde mostro que cookieStore é um wrapper fino em torno dos cookies:

       

Cookies

{{usingCookies|json}}

Cookie Store

{{usingCookieStore|json}}

Os passos são:

  1. include angular.js
  2. inclua angular-cookies.js
  3. injete ngCookies no seu módulo de aplicativo (e certifique-se de referenciar esse módulo no atributo ng-app )
  4. adicione um parâmetro $cookies ou $cookieStore ao controlador
  5. acessar o cookie como uma variável de membro usando o operador ponto (.) – OU –
  6. acessar cookieStore usando methods put / get

É assim que você pode definir e obter valores de cookie. Isso é o que eu estava procurando originalmente quando encontrei essa pergunta.

Note que usamos $cookieStore vez de $cookies

            

$cookieStore na versão 1.4.x, então use $cookies se você estiver usando a versão mais recente do angular. A syntax permanece igual para $cookieStore e $cookies :

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

Veja os documentos para uma visão geral da API. Lembre-se também de que o serviço de cookie foi aprimorado com alguns novos resources importantes, como a definição de expiração (veja esta resposta ) e o domínio (consulte CookiesProvider Docs ).

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

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

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

 bower install angular-cookies@XYZ 

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

FYI, eu coloquei um JSFiddle usando o $cookieStore , dois controladores, um $rootScope e AngularjS 1.0.6. Está no JSFifddle como http://jsfiddle.net/krimple/9dSb2/ como uma base se você está 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

 
{{ lastVal }}

O AngularJS fornece o módulo ngCookies e o serviço $ cookieStore para usar Cookies do Navegador.

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

Aqui está algum método de Cookie AngularJS.

  • get (chave); // Esse método retorna o valor da chave do cookie fornecido.

  • getObject (key); // Esse método retorna o valor desserializado da chave do cookie fornecido.

  • getAll (); // Esse método retorna um object de valor de chave com todos os cookies.

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

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

Exemplo

Html

        {{cookiesUserName}} loves {{cookietechnology}}.   

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

Eu tomei a referência de http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php .

Adicionar lib de cookie angular: angular-cookies.js

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

O controlador principal adiciona esta injeção ‘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'); } 

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. Uma das razões era apenas facilitar a integração com outros frameworks, como o Angular.

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

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

E é isso. Não jQuery. Nenhum ngCookies


Você também pode criar instâncias personalizadas para manipular cookies específicos do lado do servidor que são gravados de forma diferente. Tomemos por exemplo PHP, que convertem os espaços no lado do servidor para um sinal de mais + vez de também codificá-lo por cento:

 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 assim:

 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, veja aqui: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

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

app.html:

          

My favorite food is {{vm.food}}.

Open new window, then press Back button.

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