Wie kann ich in AngularJS auf Cookies zugreifen?

Wie kann AngularJS auf Cookies zugreifen? Ich habe Referenzen zu einem Service und einem Modul für Cookies gesehen, aber keine Beispiele.

Gibt es einen kanonischen Ansatz von AngularJS oder gibt es keinen?

Diese Antwort wurde aktualisiert, um die neueste stabile angularjs-Version widerzuspiegeln. Eine wichtige Anmerkung ist, dass $cookieStore ein dünner Wrapper ist, der $cookieStore umgibt. Sie sind in etwa so, dass sie nur mit Session-Cookies arbeiten. Obwohl dies die ursprüngliche Frage beantwortet, gibt es andere Lösungen, die Sie in Erwägung ziehen könnten, wie zum Beispiel localstorage oder jquery.cookie plugin (was Ihnen eine feinere Kontrolle und serverseitige Cookies ermöglicht. Natürlich bedeutet dies, dass Sie in angularjs stehen Wahrscheinlich würde man sie in einen Service $scope.apply wollen und $scope.apply , um Änderungen von Modellen (in einigen Fällen) zu melden.

Eine andere Anmerkung, und das ist, dass es einen kleinen Unterschied zwischen den beiden gibt, wenn Daten herausgezogen werden, abhängig davon, ob Sie $cookie zum Speichern von Werten oder $cookieStore . Natürlich möchten Sie wirklich das eine oder andere verwenden.

Zusätzlich zum Hinzufügen eines Verweises zur js-Datei müssen Sie ngCookies in Ihre App-Definition ngCookies wie zum Beispiel:

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

Dann solltest du gut gehen.

Hier ist ein funktionales minimales Beispiel, in dem ich zeige, dass cookieStore ein dünner Wrapper um Cookies ist:

 < !DOCTYPE html>      

Cookies

{{usingCookies|json}}

Cookie Store

{{usingCookieStore|json}}

Die Schritte sind:

  1. schließe angular.js
  2. schließe angular-cookies.js
  3. ngCookies in dein App-Modul ein (und vergewissere dich, dass du dieses Modul im ng-app Attribut referenzierst)
  4. $cookieStore dem Controller einen $cookies $cookieStore oder $cookieStore Parameter hinzu
  5. Greifen Sie über den Operator dot (.) auf das Cookie als Membervariable zu – ODER –
  6. cookieStore mit put / get-Methoden auf cookieStore

Auf diese Weise können Sie Cookie-Werte festlegen und abrufen. Das war, was ich ursprünglich suchte, als ich diese Frage fand.

Beachten Sie, dass wir $cookieStore anstelle von $cookies

 < !DOCTYPE html>           

Angular $cookieStore in Version 1.4.x, verwenden Sie stattdessen $cookies wenn Sie die neueste Version von angular verwenden. Syntax bleibt für $cookieStore & $cookies :

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

Eine Übersicht über die API finden Sie in der Dokumentation. Beachten Sie auch, dass der Cookie-Service mit einigen neuen wichtigen functionen wie der Einstellung von Ablaufdatum (siehe diese Antwort ) und Domain (siehe CookiesProvider-Dokumente ) erweitert wurde.

Beachten Sie, dass $ cookies in Version 1.3.x oder niedriger eine andere Syntax als oben hat:

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

Wenn du Bower benutzt, achte darauf, dass du deinen Paketnamen richtig eingibst:

 bower install angular-cookies@XYZ 

Wo XYZ ist die AngularJS-Version, die Sie ausführen. Es gibt ein anderes Paket in der Ecke “eckiger Keks” (ohne das “s”), das nicht das offizielle eckige Paket ist.

FYI, ich habe eine JSFiddle von diesem mit dem $cookieStore , zwei Controllern, einem $rootScope und AngularjS 1.0.6 zusammengestellt. Es ist auf JSFifddle als http://jsfiddle.net/krimple/9dSb2/ als Basis, wenn Sie damit herumspielen …

Der core davon ist:

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

AngularJS stellt das ngCookies-Modul und den $ cookieStore-Service zur Nutzung von Browser-Cookies zur Verfügung.

Wir müssen die Datei angular-cookies.min.js hinzufügen, um die Cookie-function zu verwenden.

Hier ist eine Methode von AngularJS Cookie.

  • bekommen (Schlüssel); // Diese Methode gibt den Wert des angegebenen Cookie-Schlüssels zurück.

  • getObject (Schlüssel); // Diese Methode gibt den deserialisierten Wert des angegebenen Cookie-Schlüssels zurück.

  • Nimm alle(); // Diese Methode gibt ein Schlüsselwertobjekt mit allen Cookies zurück.

  • put (Schlüssel, Wert, [Optionen]); // Diese Methode legt einen Wert für den angegebenen Cookie-Schlüssel fest.

  • entfernen (Schlüssel, [Optionen]); // Diese Methode entfernt das angegebene Cookie.

Beispiel

Html

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

Ich habe Referenz von http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php genommen .

Schreibe eckigen Cookie lib: angular-cookies.js

Sie können $ cookies oder $ cookieStore Parameter für den entsprechenden Controller verwenden

Main Controller fügen diese inject ‘ngCookies’:

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

Verwenden Sie Cookies in Ihrem Controller wie folgt:

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

Die ursprüngliche akzeptierte Antwort erwähnt jquery.cookie plugin . Vor ein paar Monaten wurde es in js-cookie umbenannt und die jQuery-Abhängigkeit wurde entfernt. Einer der Gründe war, einfach in andere Frameworks wie Angular zu integrieren.

Nun, wenn Sie js-cookie mit eckigen integrieren möchten , ist es so einfach wie:

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

Und das ist es. Keine jQuery. Keine ngCookies.


Sie können auch benutzerdefinierte Instanzen erstellen, um spezifische serverseitige Cookies zu behandeln, die unterschiedlich geschrieben sind. Nimm zum Beispiel PHP, das die Leerzeichen konvertiert in der Server-Seite zu einem Pluszeichen + anstatt auch Prozent-encode es:

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

Die Verwendung für einen benutzerdefinierten Provider würde in etwa so aussehen:

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

Ich hoffe, das hilft jedem.

Siehe detaillierte Informationen in dieser Ausgabe: https://github.com/js-cookie/js-cookie/issues/103

Ausführliche Dokumente zur Integration mit der Serverseite finden Sie hier: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

Hier ist ein einfaches Beispiel mit $ Cookies. Nach dem Klicken auf die Schaltfläche wird der Cookie gespeichert und nach dem erneuten Laden der Seite wiederhergestellt.

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