AngularJS'deki çerezlere nasıl erişilir?

236

Çerezlere erişmenin AngularJS yolu nedir? Çerezler için hem bir hizmete hem de bir modüle referanslar gördüm, ancak örnek yok.

AngularJS kanonik yaklaşımı var mı, yok mu?

angularjs angular-cookies

— Ellis Whitehead
kaynak

1

Angularjs ile ilgili en iyi şey, bağımlılık enjeksiyon yönü nedeniyle, birim testi için ngCookies gibi şeyleri alay edebilirsiniz. Adımlarınızı attığınız için teşekkürler.

— Dan Doyon

5

@DanDoyon Ben aynı şey impelement çalışıyorum ama yapılandırma içinde app.js içinde. ancak "Yakalanmadı Hatası: Bilinmeyen sağlayıcı: $ çerezler" herhangi bir ipucu alıyorum.

— Anand

@ sutikshan-dubey sadece sorunuzu görmek, kod örneği sağlayabilir?

— Dan Doyon

@DanDoyon Teşekkürler. çerezler pupose'umu çözmedi, stackoverflow.com/questions/12624181/… Web deposunu kullanarak düzelttim. Bu bana çok yardımcı oldu - people.opera.com/shwetankd/external/demos/webstorage_demo.htm

— Anand

1

lütfen cevabı soruya gömmek yerine cevap olarak gönderiniz .

— Eliran Malka

200

Bu cevap en son kararlı angularjs sürümünü yansıtacak şekilde güncellendi. Önemli bir not, $cookieStoreetrafını saran ince bir ambalajdır $cookies. Sadece oturum çerezleriyle çalıştıkları için hemen hemen aynıdırlar. Her ne kadar bu orijinal soruyu cevaplasa da, localstorage veya jquery.cookie eklentisi (size daha ince kontrol ve sunucu tarafı çerezleri yapma gibi) kullanmak gibi düşünmek isteyebileceğiniz başka çözümler de vardır. muhtemelen bunları bir hizmete sarmak ve $scope.applymodellerde yapılan bazı değişiklikleri bildirmek için kullanmak isteyebilir (bazı durumlarda).

Başka bir not ve bu $cookiedeğer saklamak için kullanılan veya bağlı olarak veri çekerken ikisi arasında küçük bir fark olmasıdır $cookieStore. Tabii ki, gerçekten birini ya da diğerini kullanmak istersiniz.

Js dosyasına referans eklemeye ek olarak ngCookies, uygulama tanımınıza aşağıdaki gibi enjekte etmeniz gerekir :

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

o zaman gitmek için iyi olmalısın.

İşte işlevsel bir minimal örnek, nerede cookieStoreçerezler etrafında ince bir sarıcı olduğunu göstermek :

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

Adımlar:

Dahil etmek angular.js
Dahil etmek angular-cookies.js
ngCookiesuygulama modülünüze enjekte edin (ve bu modüle ng-appözellikte başvurduğunuzdan emin olun )
denetleyiciye a $cookiesveya $cookieStoreparametre ekle
dot (.) operatörünü kullanarak çereze üye değişkeni olarak erişin - VEYA -
cookieStoreput / get yöntemlerini kullanarak erişim

— Dan Doyon
kaynak

4

Bu yanıt artık işe yaramıyor, bunun yerine başka bir yanıtta açıklandığı gibi $ cookieStore kullanmanız gerekiyor.

— Bill

Teşekkürler @ Fatura, muhtemelen haklısın, 1.2 şey büyük olasılıkla değişti. Güncelleyeceğim.

— Dan Doyon

Cevabı güncelledim ve @Bill $ cookieStore'un kullanımı muhtemelen daha kolay, ancak $ çerezleri hala biraz farklı çalışıyor

— Dan Doyon

1

Localhost ve çerezleri kullanırken sorun olduğunu düşünüyorum). Yerel ana makine yerine makine adınızı kullanırsanız daha iyi bir başarı elde edebilirsiniz.

— Dan Doyon

18

$ Çerezleri kullanın $ cookiestore artık önerilmemektedir

— Niklas Ekman

71

Çerez değerlerini bu şekilde ayarlayabilir ve alabilirsiniz. Bu soruyu bulduğumda aradığım şey buydu.

Not $cookieStoreyerine$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
kaynak

45

Sürüm 1.4.x'te kullanım dışı $cookieStore olan açısal , bu nedenle açısalın $cookiesen son sürümünü kullanıyorsanız kullanın . Sözdizimi $cookieStore& için aynı kalır $cookies:

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

API'ya genel bakış için Dokümanlar'a bakın . Ayrıca çerez hizmetinin, son kullanma tarihi ( bu cevaba bakın ) ve alan adı (bkz. CookiesProvider Dokümanları ) gibi bazı yeni önemli özelliklerle geliştirildiğini unutmayın .

1.3.x veya daha eski sürümlerde $ çerezlerinin yukarıdakinden farklı bir sözdizimi olduğunu unutmayın:

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

Ayrıca bower kullanıyorsanız, paket adınızı doğru yazdığınızdan emin olun:

bower install angular-cookies@X.Y.Z

Burada XYZ, çalıştırdığınız AngularJS sürümüdür. Bower "açısal-çerez" de ('s' olmadan) resmi açısal paket olmayan başka bir paket daha var.

— Maksood
kaynak

14

FYI, bir JSFiddle $cookieStore, a $rootScopeve AngularjS 1.0.6 , iki denetleyiciyi kullanarak bir araya getirdim. JSFifddle'da bununla uğraşıyorsanız http://jsfiddle.net/krimple/9dSb2/ olarak bir üs olarak ...

Bunun özü:

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
kaynak

11

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

Kullanmak için http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js eklediğinizden emin olun .

— Andrew Joslin
kaynak

2

Nasıl erişileceğine dair bir ipucu verebilir miyim, yoksa bunu çözmek için hangi belgelere ihtiyacım var? Angular-cookies.js dosyasını HTML dosyama ekledikten $cookieStoresonra denetleyicimin imzasını ekledim (yani function AccountCtrl($scope, $cookieStore)), ancak aşağıdaki hata iletisini aldım: Bilinmeyen sağlayıcı: $ cookieStoreProvider <- $ cookieStore

— Ellis Whitehead

Ne yazık ki, hiç kullanmadım, sadece var olduğunu biliyorum. Belki Angular google grubundan daha hızlı bir yanıt istemelisiniz. groups.google.com/forum/#!forum/angular

— Andrew Joslin

3

O çıkıyor $cookieStoregörünüşte çoğunlukla müşteri tarafından oluşturulan çerezler için tasarlanmıştır. Sunucu tarafından oluşturulan çerezlere erişmek için $cookiesbunun yerine kullanmak zorunda kaldım .

— Ellis Whitehead

7

URL güncelliğini yitirdi - günümüzde açısal çerezler Googles CDN'de barındırılıyor, burada: ajax.googleapis.com/ajax/libs/angularjs/1.0.1/… ( https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-cookies.min.js) Blog yayınına bakın: blog.angularjs.org /

— 2012/07

1

Bu yanıt bir yıldan daha eski olsa ve bağlantı yararlı olsa da, cevabın önemli kısımlarını burada, bu sitede yayınlamanız veya yazı risklerinizin silinmesi daha iyi olacaktır. bir bağlantıdan daha fazlası. İsterseniz bağlantıyı yine de ekleyebilirsiniz, ancak yalnızca 'başvuru' olarak ekleyebilirsiniz. Cevap, bağlantıya ihtiyaç duymadan kendi başına durmalıdır.

— Taryn

3

AngularJS, Tarayıcı Çerezlerini kullanmak için ngCookies modülü ve $ cookieStore hizmeti sağlar.

Çerez özelliğini kullanmak için angular-cookies.min.js dosyasını eklememiz gerekiyor.

İşte bazı AngularJS Cookie yöntemi.

anahtarı al); // Bu yöntem, verilen çerez anahtarının değerini döndürür.
getObject (anahtar); // Bu yöntem, verilen çerez anahtarının serileştirilmiş değerini döndürür.
getAll (); // Bu yöntem, tüm çerezleri içeren bir anahtar / değer nesnesi döndürür.
put (anahtar, değer, [seçenekler]); // Bu yöntem, verilen çerez anahtarı için bir değer ayarlar.
kaldır (anahtar, [seçenekler]); // Bu yöntem verilen çerezi kaldırır.

Misal

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

Http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php adresinden referans aldım .

— Manish
kaynak

3

Açısal çerez lib'i ekle: angular-cookies.js

İlgili denetleyiciye $ cookies veya $ cookieStore parametresini kullanabilirsiniz

Ana kontrolör bu enjeksiyonu 'ngCookies' ekleyin:

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

Denetleyicinizdeki Çerezleri şu şekilde kullanın:

 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
kaynak

1

Kabul edilen orijinal cevap jquery.cookie eklentisinden bahsediyor . Birkaç ay önce js-cookie olarak yeniden adlandırıldı ve jQuery bağımlılığı kaldırıldı. Sebeplerden biri, Angular gibi diğer çerçevelerle entegrasyonu kolaylaştırmaktı.

Şimdi, js-cookie'yi açısal ile entegre etmek istiyorsanız , şöyle bir şey kadar kolaydır:

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

Ve bu kadar. JQuery yok. Yemek yok.

Farklı yazılan sunucu tarafı çerezlerini işlemek için özel örnekler de oluşturabilirsiniz. Örneğin , sunucu tarafındaki boşlukları +yüzde kodlamak yerine artı işaretine dönüştüren PHP'yi ele alalım :

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

Özel bir Sağlayıcı kullanımı şu şekilde olur:

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

Umarım bu herkese yardımcı olur.

Bu sayıdaki ayrıntılı bilgilere bakın: https://github.com/js-cookie/js-cookie/issues/103

Sunucu tarafı ile nasıl entegre edileceğine ilişkin ayrıntılı dokümanlar için buraya bakın: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

— Fagner Brack
kaynak

1

İşte $ cookies kullanan basit bir örnek. Düğmeye tıkladıktan sonra, çerez kaydedilir ve sayfa yeniden yüklendikten sonra geri yüklenir.

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

})();

— aşkı yaşa
kaynak