Come accedere ai cookie in AngularJS?

236

Qual è il modo AngularJS per accedere ai cookie? Ho visto riferimenti sia a un servizio che a un modulo per i cookie, ma nessun esempio.

Esiste o non esiste un approccio canonico AngularJS?

angularjs angular-cookies

— Ellis Whitehead
fonte

1

La cosa grandiosa di angularjs è a causa dell'aspetto di dipendenza da iniezione, è possibile prendere in giro cose come ngCookies per test unitari. Grazie per aver messo i tuoi passi.

— Dan Doyon,

5

@DanDoyon Sto cercando di migliorare la stessa cosa ma in app.js all'interno di config. ma sto ricevendo "Uncaught Error: Unknown provider: $ cookies" qualsiasi indizio.

— Anand,

@ sutikshan-dubey appena vedendo la tua domanda, puoi fornire un esempio di codice?

— Dan Doyon,

@DanDoyon Grazie. cookie non ha risolto il mio pupose, stackoverflow.com/questions/12624181/...~~V~~plural~~3rd ho fissato utilizzando web-storage. Questo mi ha aiutato molto - people.opera.com/shwetankd/external/demos/webstorage_demo.htm

— Anand

1

pubblica la risposta come risposta invece di incorporarla nella domanda.

— Eliran Malka,

200

Questa risposta è stata aggiornata per riflettere l'ultima versione stabile di angularjs. Una nota importante è che $cookieStoreè un involucro sottile che circonda $cookies. Sono praticamente uguali in quanto funzionano solo con i cookie di sessione. Sebbene, questo risponda alla domanda originale, ci sono altre soluzioni che potresti voler prendere in considerazione, come l'utilizzo di localstorage o il plugin jquery.cookie (che ti darebbe un controllo più accurato e fare i cookie sul lato server. Ovviamente farlo in angularjs significa che tu probabilmente vorrebbe avvolgerli in un servizio e utilizzare$scope.apply per notificare angolarmente le modifiche ai modelli (in alcuni casi).

Un'altra nota e cioè che c'è una leggera differenza tra i due quando si estraggono i dati a seconda se si è usato $cookieper archiviare valore o $cookieStore. Certo, vorresti davvero usare l'uno o l'altro.

Oltre ad aggiungere riferimenti al file js, devi ngCookiesinserire la definizione dell'app come:

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

dovresti essere bravo ad andare.

Ecco un esempio funzionale minimo, in cui mostro che cookieStoreè un involucro sottile attorno ai 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>

I passaggi sono:

includere angular.js
includere angular-cookies.js
iniettare ngCookiesnel modulo dell'app (e assicurarsi di fare riferimento a quel modulo inng-app nell'attributo)
aggiungi un $cookieso$cookieStore parametro al controller
accedere al cookie come variabile membro utilizzando l'operatore punto (.) - OPPURE -
accedere cookieStoreusando i metodi put / get

— Dan Doyon
fonte

4

Questa risposta non funziona più, devi usare $ cookieStore invece come descritto in un'altra risposta.

— Bill

Grazie @Bill, probabilmente hai ragione, con 1.2 le cose sono molto probabilmente cambiate. Lo aggiornerò.

— Dan Doyon,

Ho aggiornato la risposta e @Bill $ cookieStore è probabilmente più facile da usare ma $ cookies funziona ancora in modo leggermente diverso

— Dan Doyon

1

Penso che ci siano problemi durante l'utilizzo di localhost e cookie). Se usi il nome della tua macchina invece di localhost potresti avere un successo migliore.

— Dan Doyon,

18

Usa $ cookies, $ cookieStore è ora deprecato

— Niklas Ekman

71

Ecco come è possibile impostare e ottenere i valori dei cookie. Questo è quello che stavo cercando originariamente quando ho trovato questa domanda.

Nota che usiamo al $cookieStoreposto di$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

Angolare deprecato $cookieStore nella versione 1.4.x, quindi utilizzare $cookiesinvece se si utilizza l'ultima versione di angolare. La sintassi rimane la stessa per $cookieStore& $cookies:

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

Consulta la documentazione per una panoramica dell'API. Ricorda inoltre che il servizio cookie è stato migliorato con alcune nuove importanti funzionalità come l'impostazione della scadenza (vedi questa risposta ) e il dominio (vedi CookieProvider Docs ).

Si noti che, nella versione 1.3.xo inferiore, $ cookies ha una sintassi diversa da quella sopra:

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

Inoltre, se stai usando il pergolato, assicurati di digitare correttamente il nome del pacchetto:

bower install angular-cookies@X.Y.Z

dove XYZ è la versione di AngularJS in esecuzione. C'è un altro pacchetto nel "biscotto angolare" (senza la "s") che non è il pacchetto angolare ufficiale.

— Maksood
fonte

14

Cordiali saluti, ho messo insieme un JSFiddle usando questo $cookieStore, due controller, a $rootScopee AngularjS 1.0.6. È su JSFifddle come http://jsfiddle.net/krimple/9dSb2/ come base se stai scherzando con questo ...

L'essenza è:

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

Assicurati di includere http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js per usarlo.

— Andrew Joslin
fonte

2

Potresti fornire un suggerimento su come accedervi o un link a quale documentazione devo capire? Dopo aver incluso il file angular-cookies.js nel mio HTML, ho aggiunto $cookieStorealla firma del mio controller (ad es. function AccountCtrl($scope, $cookieStore)), Ma ho ricevuto il seguente messaggio di errore: Fornitore sconosciuto: $ cookieStoreProvider <- $ cookieStore

— Ellis Whitehead l'

Purtroppo non l'ho mai usato, so solo che esiste. Forse dovresti chiedere al gruppo Angular google una risposta più rapida. groups.google.com/forum/#!forum/angular

— Andrew Joslin l'

3

Si scopre che $cookieStoreapparentemente è principalmente destinato ai cookie generati dal cliente. Per accedere ai cookie generati dal server, ho dovuto utilizzare $cookiesinvece.

— Ellis Whitehead,

7

L'URL è diventato obsoleto - oggi, angular-cookies - è ospitato su Googles CDN, qui: ajax.googleapis.com/ajax/libs/angularjs/1.0.1/… ( https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-cookies.min.js) Vedi post sul blog: blog.angularjs.org /

— 2012/07

1

Mentre questa risposta ha più di un anno e il link è utile, sarebbe meglio se pubblichi qui le parti essenziali della risposta qui, su questo sito, o se i tuoi messaggi rischiano di essere eliminati Vedi le FAQ dove menziona risposte che sono a malapena più di un link ". Se lo desideri, puoi comunque includere il link, ma solo come "riferimento". La risposta dovrebbe essere autonoma senza il collegamento.

— Taryn

3

AngularJS fornisce il modulo ngCookies e il servizio $ cookieStore per utilizzare i cookie del browser.

È necessario aggiungere il file angular-cookies.min.js per utilizzare la funzione cookie.

Ecco qualche metodo di AngularJS Cookie.

ottenere (chiave); // Questo metodo restituisce il valore di una determinata chiave cookie.
getObject (chiave); // Questo metodo restituisce il valore deserializzato di una determinata chiave cookie.
prendi tutto(); // Questo metodo restituisce un oggetto valore-chiave con tutti i cookie.
put (chiave, valore, [opzioni]); // Questo metodo imposta un valore per la chiave cookie specificata.
rimuovi (chiave, [opzioni]); // Questo metodo rimuove i cookie forniti.

Esempio

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

Ho preso riferimento da http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php .

— Manish
fonte

3

Aggiungi libular cookie ang: angular-cookies.js

È possibile utilizzare $ cookies o $ cookieStore nei rispettivi controller

Il controller principale aggiunge questo comando 'ngCookies':

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

Usa i cookie nel tuo controller in questo modo:

 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

La risposta originale accettata menziona il plugin jquery.cookie . Qualche mese fa, è stato rinominato js-cookie e la dipendenza jQuery è stata rimossa. Uno dei motivi era proprio quello di semplificare l'integrazione con altri framework, come Angular.

Ora, se vuoi integrare js-cookie con angolare, è facile come qualcosa di simile:

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

E questo è tutto. No jQuery. Nessun cookie.

Puoi anche creare istanze personalizzate per gestire specifici cookie lato server scritti in modo diverso. Prendiamo ad esempio PHP, che converte gli spazi sul lato server in un segno più +anziché codificarlo anche in percentuale:

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

L'utilizzo per un provider personalizzato sarebbe simile al seguente:

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

Spero che questo aiuti chiunque.

Vedi informazioni dettagliate in questo numero: https://github.com/js-cookie/js-cookie/issues/103

Per documenti dettagliati su come integrarsi con il lato server, vedere qui: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

— Fagner Brack
fonte

1

Ecco un semplice esempio usando $ cookies. Dopo aver fatto clic sul pulsante, il cookie viene salvato e quindi ripristinato dopo il ricaricamento della pagina.

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

})();

— live-love
fonte