AngularJS में कुकीज़ का उपयोग कैसे करें?

229

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

क्या वहां कोई AngularJS कैननिकल दृष्टिकोण नहीं है?

स्रोत

2012-06-09 Ellis Whitehead

कोणीय के बारे में बड़ी बात इसके निर्भरता इंजेक्शन पहलू की वजह से है, आप इकाई परीक्षण के लिए ngCookies जैसी चीजों को नकल कर सकते हैं। अपने कदम डालने के लिए धन्यवाद। –

@DanDoyon मैं एक ही चीज को अपनाने की कोशिश कर रहा हूं लेकिन APP.js में कॉन्फ़िगरेशन के अंदर। लेकिन मुझे "असहज त्रुटि: अज्ञात प्रदाता: $ कुकीज़" कोई सुराग मिल रहा है। –

@ सुतीशन-डुबे बस अपना प्रश्न देख रहे हैं, क्या आप कोड नमूना प्रदान कर सकते हैं? –

194

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

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

इसके अलावा 10 आपकी ऐप परिभाषा में:

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

आपको जाने के लिए अच्छा होना चाहिए।

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

कदम हैं::

शामिल angular.js
शामिल angular-cookies.js
यहाँ एक कार्यात्मक न्यूनतम उदाहरण के लिए, मैं कहाँ पता चलता है कि cookieStore कुकीज़ चारों ओर एक पतली आवरण है अपने ऐप मॉड्यूल में ngCookies इंजेक्ट करें (और सुनिश्चित करें कि आप उस मॉड्यूल को संदर्भित करते हैं । या - - ng-app विशेषता)
पहुँच बिंदु() ऑपरेटर का उपयोग कर एक सदस्य चर के रूप में कुकी नियंत्रक करने के लिए एक $cookies या $cookieStore पैरामीटर जोड़ने
पहुँच cookieStore पुट का उपयोग कर/तरीकों

स्रोत

2012-06-11 18:47:24

धन्यवाद, मैंने अपना प्रश्न संपादित एक पूर्ण कामकाजी उदाहरण दिखाया। –

यह उत्तर अब काम नहीं करता है, आपको दूसरे कुकी में वर्णित अनुसार $ cookieStore का उपयोग करने की आवश्यकता है। – Bill

धन्यवाद @ बिल, आप शायद सही हैं, 1.2 चीजों की संभावना सबसे ज्यादा बदल गई है। मैं इसे अपडेट कर दूंगा। –

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

सुनिश्चित करें कि आप http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js शामिल इसका इस्तेमाल करने के बनाओ।

स्रोत

2012-06-09 20:40:35

क्या आप इसे एक्सेस करने के तरीके के बारे में संकेत दे सकते हैं, या मुझे यह पता लगाने के लिए किस दस्तावेज की आवश्यकता है? मेरे एचटीएमएल में कोणीय-कुकीज़.जेएस फ़ाइल को शामिल करने के बाद, मैंने अपने नियंत्रक के हस्ताक्षर (यानी 'फ़ंक्शन AccountCtrl ($ स्कोप, $ कुकीस्टोर)') के हस्ताक्षर में '$ कुकीस्टोर 'जोड़ा, लेकिन फिर निम्न त्रुटि संदेश प्राप्त करें: अज्ञात प्रदाता : $ cookieStoreProvider <- $ कुकीस्टोर –

दुर्भाग्यवश, मैंने इसका कभी भी उपयोग नहीं किया है, मुझे पता है कि यह अस्तित्व में है। शायद आपको त्वरित प्रतिक्रिया के लिए कोणीय Google समूह से पूछना चाहिए। https://groups.google.com/forum/#!forum/angular –

यह पता चला है कि '$ कुकीस्टोर' जाहिर तौर पर क्लाइंट द्वारा जेनरेट की गई कुकीज़ के लिए लक्षित है। सर्वर से उत्पन्न कुकीज़ तक पहुंचने के लिए, मुझे इसके बजाय '$ कुकीज़' का उपयोग करना पड़ा। –

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

नोट हम आपकी जानकारी के $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>

स्रोत

2013-04-04 17:18:43 Uri

के बजाय $cookieStore उपयोग करते हैं, मैं एक साथ इस $cookieStore, दो नियंत्रकों, एक $rootScope, और AngularJS 1.0.6 उपयोग करने का एक JSFiddle डाल दिया। यह 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>

स्रोत

2013-07-11 15:47:22

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

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

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

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

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

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

bower install [email protected]

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

स्रोत

2015-05-12 21:54:43 Maksood

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

हमें कुकी सुविधा का उपयोग करने के लिए कोणीय-कुकीज़.मिन.जेएस फ़ाइल जोड़ने की आवश्यकता है।

यहां AngularJS कुकी का कुछ तरीका है।

प्राप्त करें (कुंजी); // यह विधि दी गई कुकी कुंजी का मान देता है।
getObject (कुंजी); // यह विधि कुकी कुंजी के deserialized मान देता है।
getAll(); // यह विधि सभी कुकीज़ के साथ एक महत्वपूर्ण मान ऑब्जेक्ट देता है।
डाल (कुंजी, मूल्य, [विकल्प]); // यह विधि कुकी कुंजी के लिए मान सेट करती है।
हटाएं (कुंजी, [विकल्प]); // यह विधि दी गई कुकी को हटा दें।

उदाहरण

एचटीएमएल

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

मैं ०१२३१०२८५१ से संदर्भ ले लिया है।

स्रोत

2015-10-02 03:19:41 Manish

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

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

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

और बस हो गया। कोई jQuery नहीं कोई ngCookies।

आप अलग-अलग सर्वर-साइड कुकीज़ को अलग-अलग लिखने के लिए कस्टम इंस्टेंस भी बना सकते हैं। उदाहरण 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

स्रोत

2015-10-10 20:56:14

कोणीय कुकी lib जोड़ें: कोणीय cookies.js

आप संबंधित नियंत्रक

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

0 पर $ कुकीज़ या $ cookieStore पैरामीटर का उपयोग कर सकते हैं

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

स्रोत

2016-11-30 06:01:11

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

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>

अनुप्रयोग।जेएस:

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

})();

स्रोत

2017-03-20 15:20:10

AngularJS में कुकीज़ का उपयोग कैसे करें?

उत्तर

संबंधित मुद्दे