Jak uzyskać dostęp do plików cookie w AngularJS?

236

W jaki sposób AngularJS ma dostęp do plików cookie? Widziałem odniesienia do usługi i modułu do plików cookie, ale nie ma przykładów.

Czy istnieje, czy nie istnieje podejście kanoniczne AngularJS?

angularjs  angular-cookies 
— Ellis Whitehead
źródło
1
Wspaniałą rzeczą w angularjs jest to, że ze względu na aspekt wstrzykiwania zależności możesz wyśmiewać takie rzeczy jak ngCookie do testowania jednostkowego. Dziękuję za zaangażowanie.
— Dan Doyon
5
@DanDoyon Próbuję ulepszyć to samo, ale w app.js wewnątrz config. ale pojawia się komunikat „Nieprzechwycony błąd: nieznany dostawca: $ cookies”.
— Anand
@ sutikshan-dubey właśnie widzi twoje pytanie, czy możesz podać próbkę kodu?
— Dan Doyon
@DanDoyon Thanks. pliki cookie nie rozwiązały mojego pupose, stackoverflow.com/questions/12624181/ ... Naprawiłem to za pomocą przechowywania w Internecie. Pomogło mi to bardzo - people.opera.com/shwetankd/external/demos/webstorage_demo.htm
— Anand
1
proszę zamieścić odpowiedź jako odpowiedź zamiast osadzać ją w pytaniu.
— Eliran Malka

Odpowiedzi:

200

Ta odpowiedź została zaktualizowana, aby odzwierciedlić najnowszą stabilną wersję angularjs. Jedną ważną uwagą jest to, że $cookieStoreotoczka jest cienka $cookies. Są prawie takie same, ponieważ działają tylko z sesyjnymi plikami cookie. Chociaż odpowiada to na pierwotne pytanie, istnieją inne rozwiązania, które warto rozważyć, takie jak użycie localstorage lub wtyczki jquery.cookie (co dałoby ci bardziej szczegółową kontrolę i robienie ciasteczek na serwerach. Oczywiście robiąc to w angularjs oznacza to, że prawdopodobnie chciałby zawinąć je w usługę i użyć $scope.applydo powiadomienia kątowego o zmianach w modelach (w niektórych przypadkach).

Jeszcze jedna uwaga, a mianowicie, że istnieje niewielka różnica między nimi podczas wyciągania danych, w zależności od tego, czy użyłeś $cookiedo przechowywania wartości lub $cookieStore. Oczywiście, naprawdę chcesz użyć jednego lub drugiego.

Oprócz dodania odwołania do pliku js musisz wprowadzić ngCookiesdo definicji aplikacji, na przykład:

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

powinieneś być gotowy do drogi.

Oto funkcjonalny minimalny przykład, w którym pokazuję, że cookieStorejest to cienkie opakowanie wokół plików 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>

Kroki są następujące:

  1. zawierać angular.js
  2. zawierać angular-cookies.js
  3. wstrzyknąć ngCookiesdo modułu aplikacji (i upewnij się, że odwołujesz się do tego modułu w ng-appatrybucie)
  4. dodaj parametr $cookieslub $cookieStoredo kontrolera
  5. uzyskać dostęp do pliku cookie jako zmiennej członka za pomocą operatora kropki (.) - LUB -
  6. dostęp cookieStoreprzy użyciu metod put / get
— Dan Doyon
źródło
4
Ta odpowiedź już nie działa, zamiast tego należy użyć $ cookieStore, jak opisano w innej odpowiedzi.
— Bill
Dzięki @Bill, prawdopodobnie masz rację, a 1.2 rzeczy najprawdopodobniej się zmieniły. Zaktualizuję to.
— Dan Doyon,
Zaktualizowałem odpowiedź i @Bill $ cookieStore jest prawdopodobnie łatwiejszy w użyciu, ale pliki cookie $ nadal działają trochę inaczej
— Dan Doyon
1
Myślę, że występują problemy podczas korzystania z localhost i plików cookie). Jeśli użyjesz nazwy komputera zamiast localhost, możesz odnieść większy sukces.
— Dan Doyon
18
— Niklas Ekman
71

W ten sposób można ustawić i uzyskać wartości plików cookie. Właśnie tego szukałem, kiedy znalazłem to pytanie.

Uwaga: używamy $cookieStorezamiast$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
źródło
45

Angular przestarzałe $cookieStore w wersji 1.4.x, więc użyj go, $cookiesjeśli używasz najnowszej wersji angular. Składnia pozostaje taka sama dla $cookieStore& $cookies: 

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

Omówienie interfejsu API można znaleźć w Dokumentach . Pamiętaj również, że usługa plików cookie została ulepszona o kilka nowych ważnych funkcji, takich jak ustawianie daty ważności (zobacz tę odpowiedź ) i domeny (patrz Dokumenty CookiesProvider ).

Pamiętaj, że w wersji 1.3.x lub niższej pliki cookie $ mają inną składnię niż wyżej: 

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

Również jeśli używasz altany, upewnij się, że poprawnie wpisałeś nazwę swojej paczki: 

bower install angular-cookies@X.Y.Z

gdzie XYZ jest uruchomioną wersją AngularJS. Jest jeszcze jeden pakiet w „angular-cookie” altany (bez „s”), który nie jest oficjalnym pakietem kątowym.

— Maksood
źródło
14

Do twojej wiadomości, JA przygotowałem JIDiddle tego, używając $cookieStoredwóch kontrolerów, a $rootScopei AngularjS 1.0.6. Jest na JSFifddle jako http://jsfiddle.net/krimple/9dSb2/ jako baza, jeśli masz do czynienia z tym ...

Jego istotą jest:

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
źródło
11

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

Upewnij się, że podałeś http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js, aby go użyć.

— Andrew Joslin
źródło
2
Czy możesz podać wskazówkę, jak uzyskać do niego dostęp, lub link do jakiej dokumentacji potrzebuję tego dowiedzieć? Po dołączeniu pliku angular-cookies.js do mojego kodu HTML dodałem $cookieStoredo podpisu mojego kontrolera (tj. function AccountCtrl($scope, $cookieStore)), Ale następnie otrzymałem następujący komunikat o błędzie: Nieznany dostawca: $ cookieStoreProvider <- $ cookieStore
— Ellis Whitehead
Niestety, nigdy go nie użyłem, po prostu wiem, że istnieje. Może powinieneś poprosić grupę Angular Google o szybszą odpowiedź. groups.google.com/forum/#!forum/angular
— Andrew Joslin
3
Okazuje się, że $cookieStorenajwyraźniej jest przeznaczony głównie do plików cookie generowanych przez klientów. Aby uzyskać dostęp do plików cookie generowanych przez serwer, musiałem $cookieszamiast tego użyć .
— Ellis Whitehead,
7
Adres URL stał się nieaktualny - obecnie kątowe pliki cookie są hostowane w Googles CDN, tutaj: ajax.googleapis.com/ajax/libs/angularjs/1.0.1/… ( https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-cookies.min.js) Zobacz wpis na blogu: blog.angularjs.org /
— 2012/07
1
Chociaż ta odpowiedź ma ponad rok, a link jest pomocny, lepiej byłoby, gdybyś opublikował najważniejsze części odpowiedzi tutaj, na tej stronie lub ryzykujesz usunięcie posta Zobacz FAQ, w którym wspomina się o odpowiedziach „niewiele więcej” niż link ”. Możesz dodać link, jeśli chcesz, ale tylko jako „odniesienie”. Odpowiedź powinna stać sama z siebie, bez potrzeby linkowania.
— Taryn
3

AngularJS zapewnia moduł ngCookies i usługę $ cookieStore do korzystania z plików cookie przeglądarki.

Musimy dodać plik angular-cookies.min.js, aby móc korzystać z funkcji plików cookie.

Oto niektóre metody AngularJS Cookie.

  • Weź klucz); // Ta metoda zwraca wartość podanego klucza cookie.

  • getObject (klucz); // Ta metoda zwraca zdejrializowaną wartość danego klucza cookie.

  • getAll (); // Ta metoda zwraca obiekt wartości klucza ze wszystkimi ciasteczkami.

  • put (klucz, wartość, [opcje]); // Ta metoda ustawia wartość dla danego klucza cookie.

  • usuń (klucz, [opcje]); // Ta metoda usuwa podane ciasteczko.

Przykład

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

Wziąłem odniesienie z http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php .

— Manish
źródło
3

Dodaj plik cookie kątowy lib: angular-cookies.js

Możesz użyć parametru $ cookies lub $ cookieStore do odpowiedniego kontrolera

Główny kontroler dodaje nastrzyk „ngCookies”:

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

Używaj plików cookie w kontrolerze w następujący sposób:

 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
źródło
1

Oryginalna zaakceptowana odpowiedź wspomina o wtyczce jquery.cookie . Kilka miesięcy temu zmieniono jego nazwę na js-cookie i usunięto zależność jQuery. Jednym z powodów było po prostu ułatwienie integracji z innymi frameworkami, takimi jak Angular.

Teraz, jeśli chcesz zintegrować plik cookie js z aplikacją kątową, jest to tak proste jak:

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

I to wszystko. Brak jQuery. Brak ciasteczek.

Możesz także tworzyć niestandardowe instancje do obsługi określonych po stronie serwera plików cookie, które są zapisywane inaczej. Weźmy na przykład PHP, który konwertuje spacje po stronie serwera na znak plus +zamiast kodowania procentowego:

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

Użycie niestandardowego dostawcy może wyglądać mniej więcej tak:

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

Mam nadzieję, że to pomoże każdemu.

Zobacz szczegółowe informacje w tym numerze: https://github.com/js-cookie/js-cookie/issues/103

Szczegółowe informacje na temat integracji z serwerem znajdują się tutaj: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

— Fagner Brack
źródło
1

Oto prosty przykład przy użyciu $ cookies. Po kliknięciu przycisku plik cookie jest zapisywany, a następnie przywracany po ponownym załadowaniu strony.

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

})();
— żywa miłość
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.