AngularJS में कुकीज़ कैसे एक्सेस करें?

236

कुकीज़ तक पहुँचने का AngularJS तरीका क्या है? मैंने कुकीज़ के लिए एक सेवा और एक मॉड्यूल दोनों के संदर्भ देखे हैं, लेकिन कोई उदाहरण नहीं।

वहाँ है, या वहाँ एक AngularJS विहित दृष्टिकोण नहीं है?

angularjs  angular-cookies 
— एलिस व्हाइटहेड
स्रोत
1
एंगुलरज के बारे में बड़ी बात यह है कि इसकी निर्भरता इंजेक्शन के पहलू के कारण है, आप यूनिट टेस्टिंग के लिए ngCookies जैसी चीजों का मजाक उड़ा सकते हैं। आपके चरणों में डालने के लिए धन्यवाद।
— डैन डॉयन
5
@DanDoyon मैं एक ही चीज़ को लागू करने की कोशिश कर रहा हूं, लेकिन config के अंदर app.js में। लेकिन मुझे "अनकवर्ड एरर: अज्ञात प्रदाता: $ कुकीज" किसी भी सुराग मिल रहा है।
— आनंद
@ sutikshan-dubey सिर्फ आपका सवाल देखकर, आप कोड नमूना प्रदान कर सकते हैं?
— डैन डॉयोन
@DanDoyon धन्यवाद। कुकीज़ ने मेरे पुतले को हल नहीं किया, stackoverflow.com/questions/12624181/… मैंने इसे वेब-स्टोरेज का उपयोग करके तय किया। इससे मुझे बहुत मदद मिली - People.opera.com/shwetankd/external/demos/webstorage_demo.htm
— आनंद
1
एक के रूप में उत्तर पोस्ट कृपया जवाब सवाल में एम्बेड करने के बजाय।
— एलिरन मलका

जवाबों:

200

यह उत्तर नवीनतम स्थिर कोणीय संस्करणों को प्रतिबिंबित करने के लिए अद्यतन किया गया है। एक महत्वपूर्ण नोट यह है कि $cookieStoreआसपास एक पतला आवरण है $cookies। वे इसमें बहुत अधिक हैं कि वे केवल सत्र कुकीज़ के साथ काम करते हैं। हालांकि, यह मूल प्रश्न का उत्तर देता है, ऐसे अन्य समाधान हैं जिन पर आप स्थानीय स्तर पर या jquery.cookie प्लगइन का उपयोग करने पर विचार कर सकते हैं (जो आपको और अधिक सुव्यवस्थित नियंत्रण प्रदान करेगा और कुकीज़ को सर्वर पर करेगा। निश्चित रूप से कोणीय में ऐसा करने का अर्थ है। शायद उन्हें एक सेवा में लपेटना चाहते हैं और $scope.applyमॉडल (कुछ मामलों में) में परिवर्तन के कोणीय को सूचित करने के लिए उपयोग करना चाहते हैं ।

एक अन्य ध्यान दें और वह यह है कि यदि आप $cookieमूल्य को संग्रहीत करते थे या उपयोग करते हैं, तो इसके आधार पर डेटा खींचते समय दोनों के बीच थोड़ा अंतर होता है $cookieStore। बेशक, आप वास्तव में एक या दूसरे का उपयोग करना चाहते हैं।

जेएस फ़ाइल के संदर्भ को जोड़ने के अलावा आपको ngCookiesअपनी ऐप परिभाषा में इंजेक्ट करने की आवश्यकता है जैसे:

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

तब आपको जाना अच्छा होना चाहिए

यहां एक कार्यात्मक न्यूनतम उदाहरण है, जहां मैं दिखाता हूं कि cookieStoreकुकीज़ के आसपास एक पतली आवरण है:

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

कदम हैं:

  1. शामिल angular.js
  2. शामिल angular-cookies.js
  3. ngCookiesअपने ऐप मॉड्यूल में इंजेक्ट करें (और सुनिश्चित करें कि आप उस मॉड्यूल को ng-appविशेषता में देखें)
  4. नियंत्रक में एक $cookiesया $cookieStoreपैरामीटर जोड़ें
  5. डॉट (।) ऑपरेटर का उपयोग कर सदस्य चर के रूप में कुकी का उपयोग - या -
  6. cookieStoreपुट / मेथड्स का उपयोग करके
— दान दोयोन
स्रोत
4
यह उत्तर अब काम नहीं करता है, आपको एक और उत्तर में वर्णित के बजाय $ कुकीस्टॉर का उपयोग करने की आवश्यकता है।
— बिल
धन्यवाद @ बिल, आप शायद सही हैं, 1.2 चीजों के साथ सबसे अधिक संभावना बदल गई है। मैंने इसे अपडेट कर दिया।
— दान डोयोन
मैंने जवाब अपडेट किया और @ बिल $ कूकीस्टोर शायद उपयोग करना आसान है लेकिन $ कुकीज अभी भी थोड़े अलग तरीके से काम करती है
— Dan Doyon
1
मुझे लगता है कि लोकलहोस्ट और कुकीज का उपयोग करते समय कुछ समस्याएं होती हैं)। यदि आप लोकलहोस्ट के बजाय अपने मशीन के नाम का उपयोग करते हैं तो आपको बेहतर सफलता मिल सकती है।
— दान डोयोन
18
$ कुकीज का उपयोग करें, $ कुकीस्टॉर अब पदावनत हो गया है
— एकमैन
71

यह है कि आप कुकी मान कैसे सेट और प्राप्त कर सकते हैं। यह वही है जो मैं मूल रूप से देख रहा था जब मुझे यह प्रश्न मिला।

ध्यान दें कि हम $cookieStoreइसके बजाय उपयोग करते हैं$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>
— उरी
स्रोत
45

कोणीय पदावनत $cookieStore संस्करण 1.4.x में है, इसलिए का उपयोग $cookiesकरने के बजाय आप कोणीय के नवीनतम संस्करण उपयोग कर रहे हैं। वाक्य रचना के लिए ही रहते हैं $cookieStoreऔर $cookies: 

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

एपीआई अवलोकन के लिए डॉक्स देखें । यह भी ध्यान रखें कि कुकी सेवा को समाप्ति की समय सीमा (जैसे यह उत्तर देखें ) और डोमेन ( CookiesProvider डॉक्स देखें) जैसी कुछ नई महत्वपूर्ण विशेषताओं के साथ बढ़ाया गया है ।

ध्यान दें कि, संस्करण 1.3.x या उससे नीचे, $ कुकीज़ में ऊपर की तुलना में एक अलग वाक्यविन्यास है: 

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

यदि आप बोवर का उपयोग कर रहे हैं, तो अपने पैकेज का नाम सही ढंग से लिखना सुनिश्चित करें: 

bower install angular-cookies@X.Y.Z

जहाँ XYZ आपके द्वारा चलाए जा रहे AngularJS संस्करण है। बोवर "कोणीय-कुकी" ('एस' के बिना) में एक और पैकेज है जो आधिकारिक कोणीय पैकेज नहीं है।

— मकोसोड
स्रोत
14

FYI करें, मैंने इसे एक JSFiddle को $cookieStoreदो नियंत्रकों, ए $rootScopeऔर एंगुलरजस 1.0.6 का उपयोग करके रखा । यदि आप इसके साथ खिलवाड़ कर रहे हैं तो यह एक आधार के रूप में JSFifddle पर http://jsfiddle.net/krimple/9dSb2/ है ...

इसका सार यह है:

जावास्क्रिप्ट

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

एचटीएमएल

<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>
— केन रिंपल
स्रोत
11

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

सुनिश्चित करें कि आप इसका उपयोग करने के लिए http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js शामिल हैं ।

— एंड्रयू जोसलिन
स्रोत
2
क्या आप इस बारे में कोई संकेत दे सकते हैं कि इसे कैसे एक्सेस किया जा सकता है, या यह पता लगाने के लिए मुझे किस दस्तावेज़ की लिंक चाहिए? अपने HTML में कोणीय-कुकीज़.जेएस फ़ाइल को शामिल करने के बाद, मैंने $cookieStoreअपने नियंत्रक (यानी function AccountCtrl($scope, $cookieStore)) के हस्ताक्षर में जोड़ा , लेकिन फिर निम्न त्रुटि संदेश प्राप्त करें: अज्ञात प्रदाता: $ कुकीस्टॉरप्रोवाइडर <- $ कुकीस्टेर
— व्हाइटहेड
दुर्भाग्य से, मैंने इसका कभी उपयोग नहीं किया है, मुझे पता है कि यह मौजूद है। शायद आपको जल्दी प्रतिक्रिया के लिए कोणीय Google समूह पर पूछना चाहिए। group.google.com/forum/# ​​-forum
— एंड्रयू जोस्लिन
3
यह पता चला है कि $cookieStoreजाहिरा तौर पर ज्यादातर क्लाइंट-जनरेटेड कुकीज़ के लिए है। सर्वर-जनरेटेड कुकीज़ तक पहुंचने के लिए, मुझे $cookiesइसके बजाय उपयोग करना था।
— एलिस व्हाइटहेड
7
URL पुराना हो गया है - आजकल, कोणीय-कुकीज़- को Googles CDN पर होस्ट किया जाता है, यहाँ: ajax.googleapis.com/ajax/libs/angularjs/1.0.1/…… ( https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-cookies.min.js) ब्लॉग पोस्ट देखें: blog.angularjs.org / २०१२ /
— ०
1
यद्यपि यह उत्तर एक वर्ष से अधिक पुराना है और लिंक मददगार है, तो बेहतर होगा कि आप इस साइट पर उत्तर के आवश्यक भागों को पोस्ट करें, या आपके पोस्ट को हटाए जाने के जोखिमों को अक्सर पूछे जाने वाले प्रश्न देखें जहां यह उन उत्तरों का उल्लेख करता है जो 'बमुश्किल अधिक हैं' एक कड़ी से ’। यदि आप चाहें, तो भी आप लिंक को शामिल कर सकते हैं, लेकिन केवल 'संदर्भ' के रूप में। लिंक की आवश्यकता के बिना जवाब अपने दम पर खड़ा होना चाहिए।
— तरण
3

AngularJS ब्राउज़र कुकीज़ का उपयोग करने के लिए ngCookies मॉड्यूल और $ कुकी सेवा प्रदान करता है।

हमें कुकी फ़ीचर का उपयोग करने के लिए कोणीय-कुकीज़.min.js फ़ाइल को जोड़ना होगा।

यहाँ AngularJS कुकी की कुछ विधि दी गई है।

  • चाबी देना); // यह विधि दिए गए कुकी कुंजी का मान लौटाती है।

  • GetObject (कुंजी); // यह विधि दी गई कुँजी कुंजी का वांछित मान लौटाती है।

  • सब प्राप्त कर लिया(); // यह विधि सभी कुकीज़ के साथ एक महत्वपूर्ण मान ऑब्जेक्ट लौटाती है।

  • डाल (कुंजी, मूल्य, [विकल्प]); // यह विधि दी गई कुकी कुंजी के लिए एक मान निर्धारित करती है।

  • निकालें (कुंजी, [विकल्प]); // यह विधि दी गई कुकी को हटा दें।

उदाहरण

एचटीएमएल

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

जावास्क्रिप्ट

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 से संदर्भ लिया गया है ।

— मनीष
स्रोत
3

कोणीय कुकी लिब जोड़ें: कोणीय-कुकीज़.जेएस

आप संबंधित कंट्रोलर को $ कुकीज़ या $ कुकीस्टेयर पैरामीटर का उपयोग कर सकते हैं

मुख्य नियंत्रक इस इंजेक्शन को 'ngCookies' जोड़ते हैं:

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

इस तरह से अपने कंट्रोलर में कुकीज़ का उपयोग करें:

 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'); }
— अंकुर रादडिया
स्रोत
1

मूल स्वीकृत उत्तर में jquery.cookie प्लगइन का उल्लेख है । हालांकि कुछ महीने पहले, इसे js-कुकी नाम दिया गया था और jQuery निर्भरता हटा दी गई थी। इसका एक कारण कोणीय जैसे अन्य फ्रेमवर्क के साथ एकीकृत करना आसान बनाना था।

अब, यदि आप js-कुकी को कोणीय के साथ एकीकृत करना चाहते हैं, तो यह कुछ इस तरह से आसान है:

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

और बस। कोई jQuery नहीं। कोई कालजयी नहीं।

आप विशिष्ट सर्वर-साइड कुकीज़ को संभालने के लिए कस्टम इंस्टेंस भी बना सकते हैं जो अलग-अलग लिखे गए हैं। उदाहरण के लिए PHP लें, जो सर्वर-साइड में रिक्त स्थान को प्लस चिह्न में बदलने के +बजाय इसे प्रतिशत-एन्कोड करते हैं:

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

कस्टम प्रदाता के लिए उपयोग कुछ इस तरह होगा:

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

मुझे उम्मीद है कि इससे किसी को मदद मिलेगी।

इस अंक में विस्तृत जानकारी देखें: https://github.com/js-cookie/js-cookie/issues/103

सर्वर-साइड के साथ एकीकृत करने के बारे में विस्तृत डॉक्स के लिए, यहां देखें: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

— फाग्नर ब्रैक
स्रोत
1

यहाँ $ कुकीज़ का उपयोग करके एक सरल उदाहरण दिया गया है। बटन पर क्लिक करने के बाद, कुकी बच जाती है, और फिर पृष्ठ को फिर से लोड किए जाने के बाद पुनर्स्थापित किया जाता है।

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

})();
— जिंदादिल प्यार
स्रोत
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.