จะเข้าถึงคุกกี้ใน AngularJS ได้อย่างไร

236

AngularJS มีวิธีในการเข้าถึงคุกกี้อย่างไร ฉันเห็นการอ้างอิงถึงทั้งบริการและโมดูลสำหรับคุกกี้ แต่ไม่มีตัวอย่าง

มีหรือไม่มีวิธีมาตรฐานของ AngularJS หรือไม่

angularjs angular-cookies

1

สิ่งที่ดีเกี่ยวกับ angularjs ก็คือเนื่องจากการฉีดขึ้นรูปของมันคุณสามารถเยาะเย้ยสิ่งต่าง ๆ เช่น ngCookies สำหรับการทดสอบหน่วย ขอขอบคุณที่ทำตามขั้นตอนของคุณ

— Dan Doyon

5

@DanDoyon ฉันพยายามเลียนแบบสิ่งเดียวกัน แต่ใน app.js ภายใน config แต่ฉันได้รับข้อความ "Uncaught Error: ผู้ให้บริการที่ไม่รู้จัก: $ cookies" เบาะแสใด ๆ

— อานันท์

@ sutikshan-dubey เพิ่งเห็นคำถามของคุณคุณสามารถให้ตัวอย่างรหัสได้หรือไม่

— Dan Doyon

@DanDoyon ขอบคุณ คุกกี้ไม่สามารถแก้ไข pupose ของฉันstackoverflow.com/questions/12624181/…ฉันแก้ไขโดยใช้ที่เก็บข้อมูลบนเว็บ สิ่งนี้ช่วยฉันได้มาก - people.opera.com/shwetankd/external/demos/webstorage_demo.htm

— Anand

1

โปรดโพสต์คำตอบเป็นคำตอบแทนที่จะฝังไว้ในคำถาม

— Eliran Malka

200

คำตอบนี้ได้รับการปรับปรุงเพื่อให้สอดคล้องกับรุ่น angularjs ที่เสถียรล่าสุด สิ่งสำคัญอย่างหนึ่งก็คือ$cookieStoreเป็นเสื้อคลุมบาง ๆ $cookiesรอบ พวกเขาเหมือนกันมากที่พวกเขาทำงานกับคุกกี้เซสชันเท่านั้น มีคำตอบอื่น ๆ ที่คุณอาจต้องการพิจารณาเช่นการใช้ localstorage หรือปลั๊กอิน jquery.cookie (ซึ่งจะให้การควบคุมที่ละเอียดยิ่งขึ้นแก่คุณและทำคุกกี้บนเซิร์ฟเวอร์แน่นอนว่าการทำเช่นนี้ใน angularjs หมายความว่าคุณ อาจต้องการห่อไว้ในบริการและใช้$scope.applyเพื่อแจ้งการเปลี่ยนแปลงเชิงมุมให้กับแบบจำลอง (ในบางกรณี)

บันทึกอื่น ๆ หนึ่งและนั่นคือมีความแตกต่างเล็กน้อยระหว่างสองเมื่อดึงข้อมูลออกขึ้นอยู่กับว่าคุณใช้ $cookie$cookieStoreการจัดเก็บค่าหรือ แน่นอนว่าคุณต้องการใช้อย่างใดอย่างหนึ่ง

นอกเหนือจากการเพิ่มการอ้างอิงไปยังไฟล์ js ที่คุณต้องใช้ngCookiesในการกำหนดแอพของคุณเช่น:

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

คุณควรจะไปดี

นี่คือตัวอย่างการใช้งานที่น้อยที่สุดซึ่งฉันแสดงให้เห็นว่าcookieStoreเป็น wrapper บาง ๆ รอบ ๆ คุกกี้:

<!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
ฉีดngCookiesลงในโมดูลแอปของคุณ (และให้แน่ใจว่าคุณอ้างอิงโมดูลนั้นในng-appททริบิว)
เพิ่ม$cookiesหรือ$cookieStoreพารามิเตอร์ให้กับตัวควบคุม
เข้าถึงคุกกี้ในฐานะสมาชิกตัวแปรโดยใช้ตัวดำเนินการ dot (.) - หรือ -
เข้าถึงcookieStoreโดยใช้วิธีการรับ / รับ

— ด่าน Doyon
แหล่งที่มา

4

คำตอบนี้ใช้งานไม่ได้อีกต่อไปคุณต้องใช้ $ cookieStore แทนดังที่อธิบายไว้ในคำตอบอื่น

— Bill

ขอบคุณ @Bill คุณอาจถูกต้องโดยมี 1.2 สิ่งที่เปลี่ยนแปลงไปมากที่สุด ฉันจะอัปเดต

— Dan Doyon

ฉันได้อัปเดตคำตอบแล้ว @Bill $ cookieStore น่าจะใช้ง่ายกว่า แต่ $ cookies ยังใช้งานได้แตกต่างกันเล็กน้อย

— Dan Doyon

1

ฉันคิดว่ามีปัญหาเมื่อใช้ localhost และคุกกี้) หากคุณใช้ชื่อเครื่องแทน localhost คุณอาจประสบความสำเร็จได้ดีกว่า

— Dan Doyon

18

ใช้ $ cookies ตอนนี้ $ cookieStore เลิกใช้แล้ว

— Niklas Ekman

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 โปรดทราบว่าบริการคุกกี้ได้รับการปรับปรุงด้วยคุณสมบัติใหม่ที่สำคัญบางอย่างเช่นการตั้งค่าการหมดอายุ (ดูคำตอบนี้ ) และโดเมน (ดูที่CookieProvider Docs )

โปรดทราบว่าในรุ่น 1.3.x หรือต่ำกว่า $ cookies มีไวยากรณ์ที่แตกต่างจากด้านบน:

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

นอกจากนี้ถ้าคุณใช้ bower ตรวจสอบให้แน่ใจว่าพิมพ์ชื่อแพ็คเกจของคุณอย่างถูกต้อง

bower install angular-cookies@X.Y.Z

โดยที่ XYZ เป็นรุ่น AngularJS ที่คุณกำลังใช้งาน มีหีบห่ออีกชุดหนึ่งใน bower "angular-cookie" (ไม่มีของ ') ซึ่งไม่ใช่แพ็คเกจที่เป็นทางการ

— Maksood
แหล่งที่มา

14

FYI ฉันรวบรวม JSFiddle โดยใช้$cookieStoreตัวควบคุมสองตัว a $rootScopeและ AngularjS 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 () {
});

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
แหล่งที่มา

11

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

ตรวจสอบให้แน่ใจว่าคุณใส่http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.jsเพื่อใช้งาน

— Andrew Joslin
แหล่งที่มา

2

คุณสามารถให้คำแนะนำเกี่ยวกับวิธีการเข้าถึงหรือลิงค์ไปยังเอกสารที่ฉันจำเป็นต้องเข้าใจ หลังจากรวมไฟล์ angular-cookies.js ใน HTML ของฉันฉันได้เพิ่ม$cookieStoreลายเซ็นของคอนโทรลเลอร์ (เช่นfunction AccountCtrl($scope, $cookieStore)) แล้ว แต่ได้รับข้อความแสดงข้อผิดพลาดต่อไปนี้: ผู้ให้บริการที่ไม่รู้จัก: $ cookieStoreProvider <- $ cookieStore

— Ellis Whitehead

น่าเสียดายที่ฉันไม่เคยใช้มันฉันแค่รู้ว่ามันมีอยู่จริง บางทีคุณควรถาม Angular google group เพื่อรับคำตอบที่รวดเร็ว groups.google.com/forum/#!forum/angular

— Andrew Joslin

3

ปรากฎว่า$cookieStoreส่วนใหญ่มีไว้สำหรับคุกกี้ที่ลูกค้าสร้างขึ้น ในการเข้าถึงคุกกี้ที่สร้างโดยเซิร์ฟเวอร์ฉันต้องใช้$cookiesแทน

— Ellis Whitehead

7

URL ล้าสมัยแล้ว - ทุกวันนี้ angular-cookies- โฮสต์ที่ 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 /

— 2012/07

1

ในขณะที่คำตอบนี้มีอายุเกินหนึ่งปีและลิงค์มีประโยชน์มันจะดีกว่าถ้าคุณโพสต์ส่วนสำคัญของคำตอบที่นี่บนเว็บไซต์นี้หรือความเสี่ยงของการโพสต์ของคุณถูกลบดูคำถามที่พบบ่อยที่กล่าวถึงคำตอบว่า กว่าลิงก์ ' คุณยังอาจรวมลิงค์ได้หากต้องการ แต่เป็นเพียง 'ข้อมูลอ้างอิง' คำตอบควรยืนอยู่บนตัวมันเองโดยไม่จำเป็นต้องมีลิงค์

— Taryn

3

AngularJS ให้บริการโมดูล ngCookies และบริการ $ cookieStore เพื่อใช้งานคุกกี้เบราว์เซอร์

เราจำเป็นต้องเพิ่มไฟล์ angular-cookies.min.js เพื่อใช้คุณสมบัติคุกกี้

นี่คือวิธีการบางส่วนของ AngularJS Cookie

ได้รับ (คีย์); // เมธอดนี้ส่งคืนค่าของคีย์คุกกี้ที่กำหนด
GetObject (คีย์); // เมธอดนี้ส่งคืนค่าดีซีเรียลไลซ์ของคีย์คุกกี้ที่กำหนด
getAll (); // เมธอดนี้ส่งคืนอ๊อบเจคค่าคีย์ที่มีคุกกี้ทั้งหมด
ใส่ (คีย์ค่า [ตัวเลือก]); // วิธีนี้ตั้งค่าสำหรับคีย์คุกกี้ที่กำหนด
ลบ (คีย์, [ตัวเลือก]); // วิธีนี้ลบคุกกี้ที่กำหนด

ตัวอย่าง

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

— Manish
แหล่งที่มา

3

เพิ่ม libular cookie lib: angular-cookies.js

คุณสามารถใช้ $ cookies หรือพารามิเตอร์ $ cookieStore เพื่อควบคุมที่เกี่ยวข้อง

ตัวควบคุมหลักเพิ่มส่วนเสริม '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'); }

— Ankur Radadiya
แหล่งที่มา

1

คำตอบที่ได้รับการยอมรับเดิมกล่าวปลั๊กอิน jquery.cookie ไม่กี่เดือนที่ผ่านมามันถูกเปลี่ยนชื่อเป็นjs-cookieและลบการอ้างอิง jQuery หนึ่งในเหตุผลก็เพื่อให้ง่ายต่อการรวมเข้ากับกรอบอื่น ๆ เช่น Angular

ตอนนี้ถ้าคุณต้องการรวม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

— Fagner Brack
แหล่งที่มา

1

นี่คือตัวอย่างง่ายๆที่ใช้ $ cookies หลังจากคลิกที่ปุ่มคุกกี้จะถูกบันทึกและเรียกคืนหลังจากหน้าถูกโหลดใหม่

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

})();

— ชีวิตความรัก
แหล่งที่มา