Bagaimana cara mengakses cookie di AngularJS?

236

Apa cara AngularJS untuk mengakses cookie? Saya telah melihat referensi untuk layanan dan modul untuk cookie, tetapi tidak ada contoh.

Apakah ada, atau tidak ada pendekatan kanonik AngularJS?

angularjs angular-cookies

— Ellis Whitehead
sumber

1

Hal yang hebat tentang angular adalah karena aspek dependensi injeksi, Anda dapat mengejek hal-hal seperti Ngookie untuk pengujian unit. Terima kasih telah memasukkan langkah Anda.

— Dan Doyon

5

@ DanDoyon Saya mencoba untuk mengimplementasikan hal yang sama tetapi di app.js di dalam konfigurasi. tapi saya mendapatkan "Uncaught Error: Penyedia tidak dikenal: $ cookies" petunjuk apa pun.

— Anand

@ sutikshan-dubey hanya melihat pertanyaan Anda, dapatkah Anda memberikan contoh kode?

— Dan Doyon

@DanDoyon Terima kasih. cookie tidak menyelesaikan pupose saya, stackoverflow.com/questions/12624181/... Saya memperbaikinya menggunakan penyimpanan web. Ini membantu saya banyak - people.opera.com/shwetankd/external/demos/webstorage_demo.htm

— Anand

1

tolong posting jawabannya sebagai jawaban alih-alih melekatkannya dalam pertanyaan.

— Eliran Malka

200

Jawaban ini telah diperbarui untuk mencerminkan versi angularjs stabil terbaru. Satu catatan penting adalah bahwa $cookieStorepembungkus tipis di sekitarnya $cookies. Mereka hampir sama karena mereka hanya bekerja dengan cookie sesi. Meskipun, ini menjawab pertanyaan awal, ada solusi lain yang mungkin ingin Anda pertimbangkan seperti menggunakan penyimpanan lokal, atau plugin jquery.cookie (yang akan memberi Anda lebih banyak kontrol yang baik dan melakukan cookie di sisi server. Tentu saja melakukannya di angularjs berarti Anda mungkin ingin membungkusnya dalam layanan dan digunakan $scope.applyuntuk memberi tahu sudut perubahan pada model (dalam beberapa kasus).

Satu catatan lain dan itu adalah bahwa ada sedikit perbedaan antara keduanya ketika menarik data tergantung pada apakah Anda dulu $cookiemenyimpan nilai atau $cookieStore. Tentu saja, Anda benar-benar ingin menggunakan yang satu atau yang lain.

Selain menambahkan referensi ke file js Anda perlu menyuntikkan ngCookieske definisi aplikasi Anda seperti:

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

Anda kemudian harus baik untuk pergi.

Berikut adalah contoh minimal fungsional, di mana saya menunjukkan itu cookieStoreadalah pembungkus tipis di sekitar 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>

Langkah-langkahnya adalah:

termasuk angular.js
termasuk angular-cookies.js
menyuntikkan ngCookieske modul aplikasi Anda (dan pastikan Anda referensi modul itu di ng-appatribut)
tambahkan a $cookiesatau $cookieStoreparameter ke controller
mengakses cookie sebagai variabel anggota menggunakan operator titik (.) - ATAU -
akses cookieStoremenggunakan metode put / get

— Dan Doyon
sumber

4

Jawaban ini tidak lagi berfungsi, Anda harus menggunakan $ cookieStore sebagai gantinya dijelaskan dalam jawaban lain.

— Bill

Terima kasih @Bill, Anda mungkin benar, dengan 1.2 hal kemungkinan besar telah berubah. Saya akan memperbaruinya.

— Dan Doyon

Saya memperbarui jawabannya dan @Bill $ cookieStore mungkin lebih mudah digunakan tetapi $ cookies masih bekerja sedikit berbeda

— Dan Doyon

1

Saya pikir ada masalah saat menggunakan localhost dan cookie). Jika Anda menggunakan nama mesin Anda, bukan localhost, Anda mungkin lebih sukses.

— Dan Doyon

18

Gunakan $ cookies, $ cookieStore sekarang sudah tidak digunakan lagi

— Niklas Ekman

71

Ini adalah bagaimana Anda dapat mengatur dan mendapatkan nilai cookie. Inilah yang awalnya saya cari ketika saya menemukan pertanyaan ini.

Catatan yang kami gunakan $cookieStorebukan$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
sumber

45

Sudut usang $cookieStore dalam versi 1.4.x, jadi gunakan $cookiessebagai gantinya jika Anda menggunakan versi sudut terbaru. Sintaksnya tetap sama untuk $cookieStore& $cookies:

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

Lihat Documents untuk ikhtisar API. Perlu diingat juga bahwa layanan cookie telah ditingkatkan dengan beberapa fitur penting baru seperti mengatur kedaluwarsa (lihat jawaban ini ) dan domain (lihat CookiesProvider Documents ).

Perhatikan bahwa, dalam versi 1.3.x atau di bawah, $ cookies memiliki sintaks yang berbeda dari di atas:

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

Juga jika Anda menggunakan bower, pastikan untuk mengetikkan nama paket Anda dengan benar:

bower install angular-cookies@X.Y.Z

di mana XYZ adalah versi AngularJS yang Anda jalankan. Ada paket lain dalam bower "angular-cookie" (tanpa 's') yang bukan paket sudut resmi.

— Maksood
sumber

14

FYI, saya mengumpulkan JSFiddle ini menggunakan $cookieStore, dua kontroler, a $rootScope, dan AngularjS 1.0.6. Ada di JSFifddle sebagai http://jsfiddle.net/krimple/9dSb2/ sebagai pangkalan jika Anda bermain-main dengan ini ...

Intinya adalah:

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
sumber

11

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

Pastikan Anda menyertakan http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js untuk menggunakannya.

— Andrew Joslin
sumber

2

Bisakah Anda memberikan petunjuk tentang cara mengaksesnya, atau tautan ke dokumentasi mana yang saya perlukan untuk mencari tahu? Setelah memasukkan file angular-cookies.js dalam HTML saya, saya menambahkan $cookieStoreke tanda tangan controller saya (yaitu function AccountCtrl($scope, $cookieStore)), tetapi kemudian mendapatkan pesan kesalahan berikut: Penyedia tidak dikenal: $ cookieStoreProvider <- $ cookieStore

— Ellis Whitehead

Sayangnya, saya tidak pernah menggunakannya, saya hanya tahu itu ada. Mungkin Anda harus bertanya pada grup google Angular untuk respons yang lebih cepat. groups.google.com/forum/#!forum/angular

— Andrew Joslin

3

Ternyata $cookieStoresebagian besar ditujukan untuk cookie yang dibuat oleh klien. Untuk mengakses cookie yang dihasilkan server, saya harus menggunakannya $cookies.

— Ellis Whitehead

7

URL telah kedaluwarsa - saat ini, angular- cookies- disimpan di Googles CDN, di sini: ajax.googleapis.com/ajax/libs/angularjs/1.0.1/… ( https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-cookies.min.js) Lihat posting blog: blog.angularjs.org /

— 2012/07

1

Meskipun jawaban ini sudah lebih dari setahun dan tautannya membantu, akan lebih baik jika Anda memposting bagian-bagian penting dari jawaban di sini, di situs ini, atau risiko posting Anda dihapus. Lihat FAQ di mana ia menyebutkan jawaban yang 'hampir tidak lebih dari pada tautan '. Anda masih dapat menyertakan tautan jika diinginkan, tetapi hanya sebagai 'referensi'. Jawabannya harus berdiri sendiri tanpa memerlukan tautan.

— Taryn

3

AngularJS menyediakan modul ngCookies dan layanan $ cookieStore untuk menggunakan Cookie Browser.

Kita perlu menambahkan file angular-cookies.min.js untuk menggunakan fitur cookie.

Berikut adalah beberapa metode Cookie AngularJS.

dapatkan (kunci); // Metode ini mengembalikan nilai kunci cookie yang diberikan.
getObject (kunci); // Metode ini mengembalikan nilai deserialized dari kunci cookie yang diberikan.
dapat semua(); // Metode ini mengembalikan objek nilai kunci dengan semua cookie.
put (kunci, nilai, [opsi]); // Metode ini menetapkan nilai untuk kunci cookie yang diberikan.
hapus (kunci, [opsi]); // Metode ini menghapus cookie yang diberikan.

Contoh

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

Saya telah mengambil referensi dari http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php .

— Manish
sumber

3

Tambahkan angular cookie lib: angular-cookies.js

Anda dapat menggunakan parameter $ cookies atau $ cookieStore ke controller masing-masing

Kontroler utama menambahkan suntikan ini 'ngCookies':

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

Gunakan Cookie di controller Anda seperti ini:

 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
sumber

1

Jawaban asli yang diterima menyebutkan plugin jquery.cookie . Namun beberapa bulan yang lalu, namanya diubah menjadi js-cookie dan ketergantungan jQuery dihapus. Salah satu alasannya adalah membuatnya mudah diintegrasikan dengan kerangka kerja lain, seperti Angular.

Sekarang, jika Anda ingin mengintegrasikan js-cookie dengan sudut, semudah seperti:

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

Dan itu saja. Tidak ada jQuery. Tanpa ngCookies.

Anda juga dapat membuat instance kustom untuk menangani cookie sisi server tertentu yang ditulis secara berbeda. Ambil contoh PHP, yang mengubah spasi di sisi server menjadi tanda tambah +alih-alih juga persen-kodekan:

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

Penggunaan untuk Penyedia kustom akan seperti ini:

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

Saya harap ini membantu siapa pun.

Lihat info terperinci dalam edisi ini: https://github.com/js-cookie/js-cookie/issues/103

Untuk dokumen terperinci tentang cara mengintegrasikan dengan sisi server, lihat di sini: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

— Fagner Brack
sumber

1

Berikut ini contoh sederhana menggunakan $ cookies. Setelah mengklik tombol, cookie disimpan, dan kemudian dikembalikan setelah halaman dimuat ulang.

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

})();

— cinta hidup
sumber