অ্যাঙ্গুলারজেএস-এ কীভাবে কুকিজ অ্যাক্সেস করবেন?

236

কুকি অ্যাক্সেস করার AngularJS উপায় কী? আমি কুকিজের জন্য একটি পরিষেবা এবং মডিউল উভয়েরই রেফারেন্স দেখেছি, তবে এর কোনও উদাহরণ নেই।

আছে, বা একটি AngularJS ক্যানোনিকাল পদ্ধতির নেই?

angularjs  angular-cookies 
— এলিস হোয়াইটহেড
সূত্র
1
অ্যাংুলারজগুলি সম্পর্কে দুর্দান্ত বিষয়টি এর নির্ভরতা ইনজেকশন দিকের কারণে আপনি ইউনিট পরীক্ষার জন্য এনজি কুকিজের মতো বিষয়গুলি উপহাস করতে পারেন। আপনার পদক্ষেপে রাখার জন্য ধন্যবাদ।
— ড্যান ডায়ন
5
@ ড্যানডোইন আমি একই জিনিসটি প্রয়োগ করার চেষ্টা করছি তবে কনফিগারেশনের ভিতরে app.js তে। তবে আমি "আনচাট ত্রুটি: অজানা সরবরাহকারী: $ কুকিজ" কোনও ক্লু পাচ্ছি।
— আনন্দ
@ সুতিকশন-দুবে শুধু আপনার প্রশ্ন দেখে আপনি কি কোডের নমুনা সরবরাহ করতে পারেন?
— ড্যান ডায়ন
@ ড্যানডন ধন্যবাদ কুকিজ আমার pupose সমাধান হল না stackoverflow.com/questions/12624181/... আমি ওয়েবে-স্টোরেজ ব্যবহার করে এটি স্থির করেছি। এটি আমাকে অনেক সাহায্য করেছে - people.opera.com/shwetankd/external/demos/webstores_demo.htm
— আনন্দ
1
দয়া করে উত্তরটিকে প্রশ্নের মধ্যে এম্বেড করার পরিবর্তে উত্তর হিসাবে পোস্ট করুন ।
— ইলিরান মালকা

উত্তর:

200

এই উত্তরটি সর্বশেষ স্থিতিশীল অ্যাঙ্গুলারজ সংস্করণ প্রতিবিম্বিত করতে আপডেট করা হয়েছে। একটি গুরুত্বপূর্ণ নোট হ'ল $cookieStoreচারপাশে একটি পাতলা মোড়ক $cookies। তারা বেশ সাদৃশ্যপূর্ণ যে তারা কেবল সেশন কুকিজ নিয়ে কাজ করে। যদিও এটি আসল প্রশ্নের উত্তর দেয়, এমন আরও কিছু সমাধান রয়েছে যা আপনি বিবেচনা করতে পারেন যেমন লোকালস্টোরেজ ব্যবহার করা, বা jquery.cookie প্লাগইন (যা আপনাকে আরও সূক্ষ্ম কন্ট্রোল দেয় এবং সার্ভারসাইড কুকিজ দেয় ang অবশ্যই কৌণিক বিষয়গুলিতে এটি করার অর্থ আপনি সম্ভবত সেগুলি সেগুলিতে আবদ্ধ করতে চান এবং $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 টি সম্ভবত পরিবর্তিত হয়েছে। আমি এটি আপডেট করব।
— ড্যান ডায়ন
আমি উত্তরটি আপডেট করেছিলাম এবং @ বিল $ কুকি স্টোরটি সম্ভবত ব্যবহার করা সহজ তবে $ কুকিগুলি এখনও কিছুটা আলাদাভাবে কাজ করে
— ড্যান ডায়ন
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");

একটি API ওভারভিউর জন্য ডক্স দেখুন । এটাও মনে রাখবেন যে কুকি পরিষেবাটি কয়েকটি নতুন গুরুত্বপূর্ণ বৈশিষ্ট্য যেমন মেয়াদ নির্ধারণের ( এই উত্তরটি দেখুন ) এবং ডোমেন ( কুকিজপ্রভাইডার ডক্স দেখুন ) দিয়ে বাড়ানো হয়েছে ।

নোট করুন, সংস্করণ 1.3.x বা এর নীচে, $ কুকিজের উপরের চেয়ে আলাদা বাক্য গঠন রয়েছে: 

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

এছাড়াও আপনি যদি বোওয়ার ব্যবহার করছেন তবে আপনার প্যাকেজের নামটি সঠিকভাবে লিখতে ভুলবেন না: 

bower install angular-cookies@X.Y.Z

যেখানে এক্সওয়াইজেডটি আপনি চলছে এমন অ্যাঙ্গুলারজেএস সংস্করণ। বোরারের "কৌণিক-কুকি" ('গুলি' ছাড়া) তে অন্য একটি প্যাকেজ রয়েছে যা অফিশিয়াল কৌণিক প্যাকেজ নয়।

— মাকসুদ
সূত্র
14

এফওয়াইআই, আমি এর $cookieStoreদুটি $rootScopeজেনারেটর , ক এবং অ্যাংুলারজেএস ১.০. using ব্যবহার করে এর একটি জেএসফিডেল একসাথে রেখেছি। আপনি যদি এটির সাথে ঘাঁটাঘাঁটি করেন তবে এটি বেস হিসাবে http://jsfiddle.net/krimple/9dSb2/ হিসাবে JSFifddle এ রয়েছে ...

এর সূচনাটি হ'ল:

জাভাস্ক্রিপ্ট

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
আপনি কীভাবে এটি অ্যাক্সেস করবেন সে সম্পর্কে কোনও ইঙ্গিত, বা কোন ডকুমেন্টেশনের একটি লিঙ্ক আমাকে এটি বের করার দরকার আছে? আমার এইচটিএমএলে কৌণিক-কুকিজ.জেএস ফাইল যুক্ত $cookieStoreকরার পরে , আমি আমার নিয়ামকের (যেমন function AccountCtrl($scope, $cookieStore)) এর স্বাক্ষরে যুক্ত করেছি , তবে নীচের ত্রুটি বার্তাটি পেয়েছি: অজানা সরবরাহকারী: $ কুকিস্টোরপ্রোভিডার <- $ কুকিস্টোর
— এলিস হোয়াইটহেড
দুর্ভাগ্যক্রমে, আমি এটি কখনই ব্যবহার করি নি, আমি জানি এটি বিদ্যমান। দ্রুত প্রতিক্রিয়ার জন্য আপনার কৌনিক গুগল গ্রুপে জিজ্ঞাসা করা উচিত। groups.google.com/forum/#!forum/angular
— অ্যান্ড্রু
3
দেখা যাচ্ছে যে $cookieStoreবেশিরভাগই ক্লায়েন্ট-উত্পাদিত কুকিজের জন্য উদ্দিষ্ট। সার্ভার-উত্পন্ন কুকিজ অ্যাক্সেস করতে, তার $cookiesপরিবর্তে আমাকে ব্যবহার করতে হয়েছিল।
— এলিস হোয়াইটহেড
7
ইউআরএলটি পুরানো হয়ে গেছে - আজকাল, কৌণিক- কুকিজ- গুগলস সিডিএন-তে হোস্ট করা হয়, এখানে: 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 /
— 2012/07
1
যদিও এই উত্তরটি এক বছরেরও বেশি পুরানো এবং লিঙ্কটি সহায়ক, আপনি যদি উত্তরের প্রয়োজনীয় অংশগুলি এখানে, এই সাইটে পোস্ট করেন বা আপনার পোস্টের ঝুঁকি মুছে ফেলা হয় তবে ভাল হবে যেখানে এফএকিউ দেখুন যেখানে এতে সুনির্দিষ্ট বেশি উত্তর রয়েছে একটি লিঙ্ক চেয়ে '। আপনি চাইলে লিঙ্কটি অন্তর্ভুক্ত করতে পারেন তবে কেবল 'রেফারেন্স' হিসাবে। উত্তরটি লিঙ্কটির প্রয়োজন ছাড়াই নিজেরাই দাঁড়ানো উচিত।
— তারিন
3

অ্যাঙ্গুলারজেএস ব্রাউজার কুকিজ ব্যবহার করতে এনজি কুকিজ মডিউল এবং $ কুকি স্টোর পরিষেবা সরবরাহ করে।

কুকি বৈশিষ্ট্যটি ব্যবহার করতে আমাদের কৌনিক-কুকিজ.মিন.জেএস ফাইল যুক্ত করতে হবে।

এখানে AngularJS কুকির কিছু পদ্ধতি রয়েছে।

  • (চাবি) পান; // এই পদ্ধতিটি প্রদত্ত কুকি কীটির মান প্রদান করে।

  • getObject (কী); // এই পদ্ধতিটি প্রদত্ত কুকি কীটির ডিসরিয়ালাইজড মান প্রদান করে।

  • getAll (); // এই পদ্ধতিটি সমস্ত কুকি সহ একটি মূল মান অবজেক্ট দেয়।

  • put (কী, মান, [বিকল্পসমূহ]); // এই পদ্ধতি প্রদত্ত কুকি কীয়ের জন্য একটি মান সেট করে।

  • সরান (কী, [বিকল্পসমূহ]); // এই পদ্ধতি প্রদত্ত কুকি সরান।

উদাহরণ

এইচটিএমএল

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

কৌণিক কুকি লাইব যুক্ত করুন: কৌণিক-কুকি.জ

আপনি সংশ্লিষ্ট কন্ট্রোলারে $ কুকিজ বা ie কুকি স্টোর প্যারামিটার ব্যবহার করতে পারেন

প্রধান নিয়ামক এই ইনজেকশন 'এনজিকুকিজ' যুক্ত করুন:

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 প্লাগইন উল্লেখ করা হয়েছে । যদিও কয়েক মাস আগে এটির নামকরণ করা হয়েছিল জেএস-কুকিতে এবং jQuery নির্ভরতা অপসারণ করা হয়েছে। এর অন্যতম কারণ ছিল অ্যাংুলারের মতো অন্যান্য ফ্রেমওয়ার্কগুলির সাথে একীকরণ করা সহজ করা easy

এখন, আপনি যদি কৌণিকের সাথে জেএস-কুকি সংহত করতে চান তবে এটি এমন কিছুর মতোই সহজ:

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

এবং এটাই. কোন jQuery নেই। কোনও এনজিও কুকিজ নেই।

আপনি আলাদা আলাদাভাবে লিখিত নির্দিষ্ট সার্ভার-সাইড কুকিজগুলি পরিচালনা করতে কাস্টম উদাহরণও তৈরি করতে পারেন। উদাহরণস্বরূপ পিএইচপি নিন, যা সার্ভার-সাইডের স্পেসগুলি +শতাংশ-এনকোডের পরিবর্তে প্লাস চিহ্নে রূপান্তর করে :

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

})();
— বাঁচুন ভালবাসুন
সূত্র
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.