Wie greife ich in AngularJS auf Cookies zu?

236

Wie kann AngularJS auf Cookies zugreifen? Ich habe Verweise sowohl auf einen Dienst als auch auf ein Modul für Cookies gesehen, aber keine Beispiele.

Gibt es einen kanonischen AngularJS-Ansatz oder nicht?

angularjs angular-cookies Ellis Whitehead
quelle
1
Das Tolle an anglejs ist, dass Sie aufgrund des Aspekts der Abhängigkeitsinjektion Dinge wie ngCookies für Unit-Tests verspotten können. Vielen Dank für Ihre Schritte.
Dan Doyon
5
@DanDoyon Ich versuche das gleiche Element zu impelementieren, aber in app.js in config. Aber ich bekomme "Ungefangener Fehler: Unbekannter Anbieter: $ Cookies" einen Hinweis.
Anand
@ sutikshan-dubey Wenn Sie gerade Ihre Frage sehen, können Sie ein Codebeispiel bereitstellen?
Dan Doyon
@ DanDoyon Danke. Cookies haben meine Probleme nicht gelöst, stackoverflow.com/questions/12624181/… Ich habe es mithilfe von Web-Storage behoben. Dies hat mir sehr geholfen - people.opera.com/shwetankd/external/demos/webstorage_demo.htm
Anand
1
Bitte posten Sie die Antwort als Antwort, anstatt sie in die Frage einzubetten.
Eliran Malka

Antworten:

200

Diese Antwort wurde aktualisiert, um die neueste stabile Winkelversion widerzuspiegeln. Ein wichtiger Hinweis ist, dass $cookieStorees sich um eine dünne Hülle handelt $cookies. Sie sind insofern ziemlich gleich, als sie nur mit Sitzungscookies arbeiten. Obwohl dies die ursprüngliche Frage beantwortet, gibt es andere Lösungen, die Sie möglicherweise in Betracht ziehen möchten, z. B. die Verwendung von localstorage oder das jquery.cookie-Plugin (das Ihnen eine genauere Kontrolle und die Erstellung von serverseitigen Cookies ermöglicht. Natürlich bedeutet dies, dass Sie dies in anglejs tun wahrscheinlich würde sie in einen Dienst einwickeln und verwenden wollen$scope.apply einbinden , um Winkeländerungen an Modellen zu melden (in einigen Fällen).

Ein weiterer Hinweis ist, dass es beim Abrufen von Daten einen geringfügigen Unterschied zwischen den beiden gibt, je nachdem, ob Sie $cookieWert oder gespeichert haben$cookieStore . Natürlich möchten Sie wirklich das eine oder andere verwenden.

Zusätzlich zum Hinzufügen eines Verweises auf die js-Datei müssen Sie diese ngCookiesin Ihre App-Definition einfügen, z.

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

Sie sollten dann gut zu gehen sein.

Hier ist ein funktionales Minimalbeispiel, in dem ich zeige, dass cookieStorees sich um eine dünne Hülle um Cookies handelt:

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

Die Schritte sind:

  1. einschließen angular.js
  2. einschließen angular-cookies.js
  3. Injizieren Sie ngCookiesin Ihr App-Modul (und stellen Sie sicher, dass Sie auf dieses Modul in der App verweisenng-app - Attribute)
  4. füge ein $cookiesoder hinzu$cookieStore dem Controller Parameter hinzu
  5. Greifen Sie mit dem Punkt (.) -Operator - ODER - auf das Cookie als Elementvariable zu
  6. Zugriff cookieStoremit put / get-Methoden
Dan Doyon
quelle
4
Diese Antwort funktioniert nicht mehr. Sie müssen stattdessen $ cookieStore verwenden, wie in einer anderen Antwort beschrieben.
Bill
Danke @Bill, Sie haben wahrscheinlich Recht, mit 1.2 haben sich die Dinge höchstwahrscheinlich geändert. Ich werde es aktualisieren.
Dan Doyon
Ich habe die Antwort aktualisiert und @Bill $ cookieStore ist wahrscheinlich einfacher zu verwenden, aber $ cookies funktioniert immer noch ein wenig anders
Dan Doyon
1
Ich denke, es gibt Probleme bei der Verwendung von localhost und Cookies. Wenn Sie Ihren Computernamen anstelle von localhost verwenden, haben Sie möglicherweise einen besseren Erfolg.
Dan Doyon
18
Verwenden Sie $ Cookies, $ cookieStore ist jetzt veraltet
Niklas Ekman
71

Auf diese Weise können Sie Cookie-Werte festlegen und abrufen. Dies ist, wonach ich ursprünglich gesucht habe, als ich diese Frage gefunden habe.

Beachten Sie, dass wir $cookieStoreanstelle von verwenden$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
quelle
45

Angular ist in Version 1.4.x veraltet. $cookieStore Verwenden $cookiesSie es stattdessen, wenn Sie die neueste Version von Angular verwenden . Die Syntax bleibt für $cookieStore& $cookies: 

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

Eine API-Übersicht finden Sie in den Dokumenten . Beachten Sie auch, dass der Cookie-Service mit einigen neuen wichtigen Funktionen wie dem Festlegen des Ablaufs (siehe diese Antwort ) und der Domain (siehe CookiesProvider-Dokumente ) erweitert wurde.

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

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

Auch wenn Sie Bower verwenden, stellen Sie sicher, dass Sie Ihren Paketnamen richtig eingeben: 

bower install angular-cookies@X.Y.Z

Dabei ist XYZ die AngularJS-Version, die Sie ausführen. Es gibt ein weiteres Paket in der Laube "Angular-Cookie" (ohne das 's'), das nicht das offizielle Winkelpaket ist.

Maksood
quelle
14

Zu Ihrer Information, ich habe eine JSFiddle davon mit den $cookieStorebeiden Controllern a $rootScopeund AngularjS 1.0.6 zusammengestellt. Es ist auf JSFifddle als http://jsfiddle.net/krimple/9dSb2/ als Basis, wenn Sie damit herumspielen ...

Der Kern 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

<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
quelle
11

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

Stellen Sie sicher, dass Sie http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js angeben , um es zu verwenden.

Andrew Joslin
quelle
2
Können Sie einen Hinweis geben, wie Sie darauf zugreifen können, oder einen Link zu der Dokumentation, die ich benötige, um dies herauszufinden? Nachdem ich die Datei angle-cookies.js in meinen HTML-Code aufgenommen hatte, fügte ich $cookieStoreder Signatur meines Controllers (dh function AccountCtrl($scope, $cookieStore)) hinzu, erhielt dann jedoch die folgende Fehlermeldung: Unbekannter Anbieter: $ cookieStoreProvider <- $ cookieStore
Ellis Whitehead
Leider habe ich es nie benutzt, ich weiß nur, dass es existiert. Vielleicht sollten Sie in der Google-Gruppe Angular nach einer schnelleren Antwort fragen. groups.google.com/forum/#!forum/angular
Andrew Joslin
3
Es stellt sich heraus, dass dies $cookieStoreanscheinend hauptsächlich für vom Kunden generierte Cookies gedacht ist. Um auf vom Server generierte Cookies zuzugreifen, musste ich $cookiesstattdessen verwenden.
Ellis Whitehead
7
Die URL ist veraltet - heutzutage werden Angular-Cookies auf Googles CDN gehostet, hier: ajax.googleapis.com/ajax/libs/angularjs/1.0.1/… ( https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-cookies.min.js) Siehe Blog-Beitrag: blog.angularjs.org /
2012/07
1
Obwohl diese Antwort über ein Jahr alt ist und der Link hilfreich ist, ist es besser, wenn Sie die wesentlichen Teile der Antwort hier auf dieser Website veröffentlichen oder Ihr Beitrag möglicherweise gelöscht wird. Lesen Sie die FAQ, in der Antworten erwähnt werden, die kaum mehr sind als ein Link '. Sie können den Link weiterhin einfügen, wenn Sie dies wünschen, jedoch nur als 'Referenz'. Die Antwort sollte für sich allein stehen, ohne den Link zu benötigen.
Taryn
3

AngularJS bietet das ngCookies-Modul und den $ cookieStore-Dienst zur Verwendung von Browser-Cookies.

Wir müssen die Datei angle-cookies.min.js hinzufügen, um die Cookie-Funktion verwenden zu können.

Hier ist eine Methode von AngularJS Cookie.

  • get (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 gegebene Cookies.

Beispiel

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

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

Manish
quelle
3

Fügen Sie Angular Cookie Lib hinzu: Angular-Cookies.js

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

Hauptcontroller fügen diese Injektion 'ngCookies' hinzu:

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'); }
Ankur Radadiya
quelle
1

Die ursprünglich akzeptierte Antwort erwähnt das jquery.cookie-Plugin . Vor einigen Monaten wurde es jedoch in js-cookie umbenannt und die jQuery-Abhängigkeit entfernt. Einer der Gründe war, die Integration in andere Frameworks wie Angular zu vereinfachen.

Wenn Sie js-cookie in angle integrieren möchten , ist dies 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 bestimmte serverseitige Cookies zu verarbeiten, die unterschiedlich geschrieben sind. Nehmen wir zum Beispiel PHP, das die Leerzeichen auf der Serverseite in ein Pluszeichen umwandelt , +anstatt es auch in Prozent zu codieren:

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 Anbieter wäre ungefähr so:

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.

Detaillierte Informationen finden Sie in dieser Ausgabe: https://github.com/js-cookie/js-cookie/issues/103

Ausführliche Informationen zur Integration in die Serverseite finden Sie hier: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

Fagner Brack
quelle
1

Hier ist ein einfaches Beispiel für die Verwendung von $ Cookies. Nach dem Klicken auf die Schaltfläche wird das Cookie gespeichert und nach dem erneuten Laden der Seite wiederhergestellt.

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-Liebe
quelle