Làm thế nào để truy cập cookie trong AngularJS?

236

Cách AngularJS để truy cập cookie là gì? Tôi đã thấy các tài liệu tham khảo cho cả dịch vụ và mô-đun cho cookie, nhưng không có ví dụ.

Có, hoặc không có một cách tiếp cận kinh điển AngularJS?

angularjs angular-cookies

— Đầu trắng
nguồn

1

Điều tuyệt vời của angularjs là do khía cạnh tiêm chích phụ thuộc của nó, bạn có thể chế nhạo những thứ như ngCookies để thử nghiệm đơn vị. Cảm ơn đã đưa vào các bước của bạn.

— Dan Doyon

5

@DanDoyon Tôi đang cố gắng khắc phục điều tương tự nhưng trong app.js bên trong cấu hình. nhưng tôi nhận được "Lỗi chưa được xử lý: Nhà cung cấp không xác định: $ cookies" bất kỳ manh mối nào.

— Anand

@ sutikshan-dubey chỉ cần nhìn thấy câu hỏi của bạn, bạn có thể cung cấp mẫu mã không?

— Dan Doyon

@DanDoyon Cảm ơn. cookie không giải quyết được con rối của tôi, stackoverflow.com/questions/12624181/ Tôi đã sửa nó bằng cách sử dụng lưu trữ web. Điều này đã giúp tôi rất nhiều - people.opera.com/shwetankd/external/demos/webst Storage_demo.htmlm

— Anand

1

xin vui lòng gửi câu trả lời như một câu trả lời thay vì nhúng nó trong câu hỏi.

— Eliran Malka

200

Câu trả lời này đã được cập nhật để phản ánh phiên bản angularjs ổn định mới nhất. Một lưu ý quan trọng $cookieStorelà một lớp bọc mỏng bao quanh $cookies. Chúng khá giống nhau ở chỗ chúng chỉ hoạt động với cookie phiên. Mặc dù, điều này trả lời cho câu hỏi ban đầu, có một số giải pháp khác mà bạn có thể muốn xem xét như sử dụng plugin cục bộ hoặc plugin jquery.cookie (sẽ cung cấp cho bạn quyền kiểm soát chi tiết hơn và làm cookie máy chủ. Tất nhiên làm như vậy trong angularjs có nghĩa là bạn có lẽ sẽ muốn bọc chúng trong một dịch vụ và sử dụng $scope.applyđể thông báo các thay đổi cho các mô hình (trong một số trường hợp).

Một lưu ý khác và đó là có một chút khác biệt giữa hai khi rút dữ liệu ra tùy thuộc vào việc bạn đã sử dụng $cookieđể lưu trữ giá trị hay $cookieStore. Tất nhiên, bạn thực sự muốn sử dụng cái này hay cái khác.

Ngoài việc thêm tham chiếu vào tệp js, bạn cần đưa ngCookiesvào định nghĩa ứng dụng của mình, chẳng hạn như:

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

sau đó bạn nên đi

Dưới đây là một ví dụ tối thiểu về chức năng, trong đó tôi chỉ ra rằng đó cookieStorelà một trình bao bọc mỏng xung quanh cookie:

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

Các bước là:

bao gồm angular.js
bao gồm angular-cookies.js
tiêm ngCookiesvào mô-đun ứng dụng của bạn (và đảm bảo bạn tham chiếu mô-đun đó trong ng-appthuộc tính)
thêm một $cookieshoặc $cookieStoretham số cho bộ điều khiển
truy cập cookie dưới dạng biến thành viên bằng toán tử dấu chấm (.) - HOẶC -
truy cập cookieStorebằng phương thức put / get

— Đàn Doyon
nguồn

4

Câu trả lời này không còn hoạt động nữa, bạn cần sử dụng $ cookieStore thay vào đó như được mô tả trong câu trả lời khác.

— Hóa đơn

Cảm ơn @Bill, bạn có thể đúng, với 1,2 điều có thể đã thay đổi. Tôi sẽ cập nhật nó.

— Dan Doyon

Tôi đã cập nhật câu trả lời và @Bill $ cookieStore có thể dễ sử dụng hơn nhưng $ cookie vẫn hoạt động hơi khác một chút

— Dan Doyon

1

Tôi nghĩ rằng có vấn đề khi sử dụng localhost và cookie). Nếu bạn sử dụng tên máy của bạn thay vì localhost, bạn có thể thành công hơn.

— Dan Doyon

18

Sử dụng $ cookie, $ cookieStore hiện không được chấp nhận

— Niklas Ekman

71

Đây là cách bạn có thể đặt và nhận giá trị cookie. Đây là những gì tôi đã tìm kiếm ban đầu khi tôi tìm thấy câu hỏi này.

Lưu ý chúng tôi sử dụng $cookieStorethay vì$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
nguồn

45

Angular không dùng nữa $cookieStore trong phiên bản 1.4.x, vì vậy hãy sử dụng $cookiesthay thế nếu bạn đang sử dụng phiên bản mới nhất của angular. Cú pháp vẫn giữ nguyên cho $cookieStore& $cookies:

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

Xem Tài liệu để biết tổng quan về API. Cũng lưu ý rằng dịch vụ cookie đã được cải tiến với một số tính năng quan trọng mới như thiết lập hết hạn (xem câu trả lời này ) và tên miền (xem Tài liệu CookiesProvider ).

Lưu ý rằng, trong phiên bản 1.3.x trở xuống, $ cookie có cú pháp khác với ở trên:

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

Ngoài ra nếu bạn đang sử dụng Bower, hãy đảm bảo nhập chính xác tên gói của bạn:

bower install angular-cookies@X.Y.Z

XYZ là phiên bản AngularJS bạn đang chạy. Có một gói khác trong bower "angular-cookie" (không có 's') không phải là gói góc chính thức.

— Maksood
nguồn

14

FYI, tôi kết hợp một JSFiddle về điều này bằng cách sử dụng $cookieStore, hai bộ điều khiển, a $rootScopevà AngularjS 1.0.6. Đó là trên JSFifddle với tên http://jsfiddle.net/krimple/9dSb2/ làm cơ sở nếu bạn đang loay hoay với điều này ...

Ý chính của nó là:

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
nguồn

11

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

Đảm bảo bạn bao gồm http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js để sử dụng nó.

— Andrew Joslin
nguồn

2

Bạn có thể cung cấp một gợi ý về cách truy cập nó, hoặc một liên kết đến tài liệu nào tôi cần để tìm ra điều này? Sau khi bao gồm tệp angular-cookies.js trong HTML của mình, tôi đã thêm vào $cookieStorechữ ký của bộ điều khiển của mình (ví dụ function AccountCtrl($scope, $cookieStore)), nhưng sau đó nhận được thông báo lỗi sau: Nhà cung cấp không xác định: $ cookieStoreProvider <- $ cookieStore

— Ellis Whitehead

Thật không may, tôi chưa bao giờ sử dụng nó, tôi chỉ biết nó tồn tại. Có lẽ bạn nên hỏi trên nhóm Google Angular để được phản hồi nhanh hơn. Groups.google.com/forum/#!forum/angular

— Andrew Joslin

3

Nó chỉ ra rằng $cookieStorechủ yếu là dành cho các cookie do khách hàng tạo ra. Để truy cập cookie do máy chủ tạo, tôi phải sử dụng $cookiesthay thế.

— Ellis Whitehead

7

URL đã hết hạn - ngày nay, angular-cookies- được lưu trữ tại Googles CDN, tại đây: ajax.googleapis.com/ajax/libs/angularjs/1.0.1/. ( https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular-cookies.min.jsXem bài đăng trên blog: blog.angularjs.org /

— 2012/07

1

Mặc dù câu trả lời này đã được hơn một năm và liên kết này rất hữu ích, nhưng sẽ tốt hơn nếu bạn đăng các phần thiết yếu của câu trả lời ở đây, trên trang web này hoặc rủi ro bài đăng của bạn bị xóa Xem Câu hỏi thường gặp trong đó đề cập đến câu trả lời 'hầu như không nhiều hơn là một liên kết '. Bạn vẫn có thể bao gồm liên kết nếu bạn muốn, nhưng chỉ là một 'tài liệu tham khảo'. Câu trả lời nên tự đứng mà không cần liên kết.

— Taryn

3

AngularJS cung cấp mô-đun ngCookies và dịch vụ $ cookieStore để sử dụng Cookies trình duyệt.

Chúng ta cần thêm tệp angular-cookies.min.js để sử dụng tính năng cookie.

Đây là một số phương pháp của AngularJS Cookie.

lấy (chìa khóa); // Phương thức này trả về giá trị của khóa cookie đã cho.
getObject (khóa); // Phương thức này trả về giá trị khử của khóa cookie đã cho.
lấy tất cả(); // Phương thức này trả về một đối tượng giá trị khóa với tất cả các cookie.
đặt (khóa, giá trị, [tùy chọn]); // Phương thức này đặt một giá trị cho khóa cookie đã cho.
xóa (khóa, [tùy chọn]); // Phương pháp này loại bỏ cookie đã cho.

Thí dụ

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

Tôi đã tham khảo từ http://www.tutsway.com/simple-example-of-cookie-in-angular-js.php .

— Manish
nguồn

3

Thêm lib góc cookie: angular-cookies.js

Bạn có thể sử dụng tham số $ cookies hoặc $ cookieStore cho bộ điều khiển tương ứng

Bộ điều khiển chính thêm phần tiêm 'ngCookies' này:

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

Sử dụng Cookies trong bộ điều khiển của bạn như thế này:

 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
nguồn

1

Câu trả lời ban đầu được chấp nhận đề cập đến plugin jquery.cookie . Một vài tháng trước, nó đã được đổi tên thành js-cookie và loại bỏ phụ thuộc jQuery. Một trong những lý do là để dễ dàng tích hợp với các khung công tác khác, như Angular.

Bây giờ, nếu bạn muốn tích hợp js-cookie với góc cạnh, nó dễ dàng như một cái gì đó như:

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

Và đó là nó. Không có jQuery. Không ngCookies.

Bạn cũng có thể tạo các phiên bản tùy chỉnh để xử lý các cookie phía máy chủ cụ thể được viết khác nhau. Lấy ví dụ PHP, chuyển đổi các khoảng trắng ở phía máy chủ thành dấu cộng +thay vì mã hóa phần tră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, ' ')
    });
});

Việc sử dụng cho Nhà cung cấp tùy chỉnh sẽ giống như thế này:

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

Tôi hy vọng điều này sẽ giúp bất cứ ai.

Xem thông tin chi tiết trong vấn đề này: https://github.com/js-cookie/js-cookie/issues/103

Để biết tài liệu chi tiết về cách tích hợp với phía máy chủ, xem tại đây: https://github.com/js-cookie/js-cookie/blob/master/SERVER_SIDE.md

— Fagner Brack
nguồn

1

Đây là một ví dụ đơn giản sử dụng $ cookies. Sau khi nhấp vào nút, cookie được lưu và sau đó được khôi phục sau khi trang được tải lại.

ứng dụng.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");
        };
    }]);

})();

— sống tình yêu
nguồn