Cách đặt ngày hết hạn cho cookie trong AngularJS

80

  1. Chúng tôi muốn lưu trữ thông tin Ủy quyền của Người dùng trong cookie sẽ không bị mất khi làm mới (F5) trình duyệt.

  2. Chúng tôi muốn lưu trữ thông tin ủy quyền trong "vĩnh viễn-cookie" trong trường hợp người dùng đã chọn hộp kiểm "Nhớ thông tin đăng nhập" tại thời điểm đăng nhập.

javascript  cookies  angularjs  session-cookies  angular-cookies 
— Anand
nguồn
2
Đối với thời điểm hiện tại tôi đang sử dụng lưu trữ cục bộ và lưu trữ phiên cho mục đích này Ref people.opera.com/shwetankd/external/demos/webstorage_demo.htm
— Anand

Câu trả lời:

45

Điều này có thể thực hiện được trong phiên bản 1.4.0 của góc bằng cách sử dụng ngCookiesmô-đun:

https://docs.angularjs.org/api/ngCookies/service/$cookies

angular.module('cookiesExample', ['ngCookies'])
.controller('ExampleController', ['$cookies', function($cookies) {
  // Find tomorrow's date.
  var expireDate = new Date();
  expireDate.setDate(expireDate.getDate() + 1);
  // Setting a cookie
  $cookies.put('myFavorite', 'oatmeal', {'expires': expireDate});
}]);
— Geert van Dort
nguồn
2
không rõ ràng lắm từ tài liệu nếu {'expires': expireDate});hoặc .......................................... ............ [{'expires': expireDate}]);định dạng nên được sử dụng ...
— Serge
2
[] Của tài liệu $ cookies.put (key, value, [options]) là một chú thích cho "option". Nó không có nghĩa là mảng !!! Trên thực tế, họ nói "options" là một đối tượng {a: x, b: y, c: z} nếu bạn đọc lại tài liệu.
— Jenna Leaf
32

Đối với 1.4: Như đã lưu ý trong nhận xét ở đây và những người khác bên dưới, kể từ 1.4, hỗ trợ cookie gốc của Angular hiện cung cấp khả năng chỉnh sửa cookie:

Do 38fbe3ee, $ cookie sẽ không còn hiển thị các thuộc tính đại diện cho các giá trị cookie của trình duyệt hiện tại. $ cookies không còn thăm dò ý kiến ​​của trình duyệt để biết các thay đổi đối với cookie và không còn sao chép các giá trị cookie vào đối tượng $ cookies.

Điều này đã được thay đổi vì bỏ phiếu tốn kém và gây ra sự cố với các thuộc tính $ cookies không đồng bộ hóa chính xác với các giá trị cookie thực tế của trình duyệt (Lý do ban đầu tính năng thăm dò được thêm vào là để cho phép giao tiếp giữa các tab khác nhau, nhưng có nhiều cách tốt hơn để thực hiện việc này ngày nay , ví dụ localStorage.)

API mới trên $ cookie như sau:

get put getObject putObject getAll remove Bạn phải sử dụng triệt để các phương pháp trên để truy cập dữ liệu cookie. Điều này cũng có nghĩa là bạn không còn có thể xem các thuộc tính trên $ cookie để phát hiện các thay đổi xảy ra trên cookie của trình duyệt.

Tính năng này thường chỉ cần thiết nếu thư viện của bên thứ 3 đã lập trình thay đổi cookie trong thời gian chạy. Nếu bạn dựa vào điều này thì bạn phải viết mã có thể phản ứng với thư viện bên thứ 3 thực hiện các thay đổi đối với cookie hoặc triển khai cơ chế bỏ phiếu của riêng bạn.

Việc triển khai thực tế được thực hiện thông qua đối tượng $ cookiesProvider , đối tượng này có thể được chuyển qua lệnh putgọi.

Đối với phiên bản 1.3 trở xuống: Đối với những bạn đã cố gắng hết sức để tránh phải tải các plugin jQuery, đây có vẻ là một sự thay thế tuyệt vời cho angle - https://github.com/ivpusic/angular-cookie

— khoa học đường phố
nguồn
Giải pháp tuyệt vời khi sử dụng Angular 1.3 hoặc thấp hơn.
— vegemite4me
27

Trong Angular v1.4, cuối cùng, bạn có thể đặt một số tùy chọn cho cookie, chẳng hạn như hết hạn. Đây là một ví dụ rất đơn giản:

var now = new Date(),
    // this will set the expiration to 12 months
    exp = new Date(now.getFullYear()+1, now.getMonth(), now.getDate());

$cookies.put('someToken','blabla',{
  expires: exp
});

var cookie = $cookies.get('someToken');
console.log(cookie); // logs 'blabla'

Nếu bạn kiểm tra cookie của mình sau khi chạy mã này, bạn sẽ thấy rằng thời hạn sẽ được đặt đúng thành cookie được đặt tên someToken.

Các đối tượng thông qua như là một param thứ ba để các putchức năng trên cho phép lựa chọn khác là tốt, chẳng hạn như thiết lập path, domainvà secure. Kiểm tra tài liệu để biết tổng quan.

Tái bút - Một lưu ý phụ nếu bạn đang nâng cấp tâm trí $cookieStoređã không được dùng nữa, vì vậy $cookieshiện tại là phương pháp duy nhất để xử lý cookie. xem tài liệu

— Aurelio
nguồn
15

Tôi muốn trình bày thêm một ví dụ vì một số người biết thời hạn bổ sung của thời gian tồn tại của cookie. I E. Họ muốn đặt cookie kéo dài thêm 10 phút hoặc thêm 1 ngày.

Thông thường, bạn đã biết cookie sẽ tồn tại bao lâu nữa trong vài giây.

    var today = new Date();
    var expiresValue = new Date(today);

    //Set 'expires' option in 1 minute
    expiresValue.setMinutes(today.getMinutes() + 1); 

    //Set 'expires' option in 2 hours
    expiresValue.setMinutes(today.getMinutes() + 120); 


    //Set 'expires' option in (60 x 60) seconds = 1 hour
    expiresValue.setSeconds(today.getSeconds() + 3600); 

    //Set 'expires' option in (12 x 60 x 60) = 43200 seconds = 12 hours
    expiresValue.setSeconds(today.getSeconds() + 43200); 

    $cookies.putObject('myCookiesName', 'myCookiesValue',  {'expires' : expiresValue});

và bạn có thể lấy nó như bình thường: 

    var myCookiesValue = $cookies.getObject('myCookiesName');

Nếu trống, nó trả về không xác định.

Các liên kết;

http://www.w3schools.com/jsref/jsref_obj_date.asp
https://docs.angularjs.org/api/ngCookies/provider/ $ cookiesProvider # defaults

— Andreas Panagiotidis
nguồn
1
Từ đâu todayđến?
— Thomas Kekeisen
Tôi đã cố gắng làm cho mã đẹp hơn và quên thay đổi tất cả 'từ bây giờ đến hôm nay. Bây giờ nó sẽ ổn.
— Andreas Panagiotidis,
Tôi có một câu hỏi. Khi tôi nhận được giá trị từ cookie, tôi nên kiểm tra ngày hết hạn của nó hay $cookiestự động trả về không xác định nếu giá trị đã hết hạn?
— hadi.mansouri
3

Bạn có thể truy cập tập lệnh angle.js và thay đổi
tìm kiếm chèn cookie self.cookies = function(name, value) { sau đó bạn có thể thay đổi mã thêm cookie chẳng hạn trong 7 ngày

 if (value === undefined) {
    rawDocument.cookie = escape(name) + "=;path=" + cookiePath +
                            ";expires=Thu, 01 Jan 1970 00:00:00 GMT";
  } else {
    if (isString(value)) {
        var now = new Date();
        var time = now.getTime();
        time += 24*60*60*1000*7;
        now.setTime(time);
         cookieLength = (rawDocument.cookie = escape(name) + '=' + escape(value) +
                 ';path=' + cookiePath+";expires="+now.toGMTString()).length + 1
— yonia
nguồn
2

Tôi biết rằng câu hỏi này hơi cũ và đã có một câu trả lời được chấp nhận.

Nhưng vẫn là một vấn đề hiện tại mà tôi đang phải vật lộn (không liên quan đến jQuery hoặc Javascript thuần).

Vì vậy, sau một số nghiên cứu, tôi đã tìm thấy điều này: https://github.com/ivpusic/angular-cookie

Nó cung cấp một "giao diện" khá giống với $ cookieStore. Và cho phép cấu hình ngày hết hạn (giá trị và đơn vị).

Về hỗ trợ gốc theo góc cạnh vào ngày hết hạn với $ cookie hoặc $ cookieStore, "họ" hứa sẽ cập nhật về chủ đề này vào ngày 1.4, hãy xem điều này: https://github.com/angular/angular.js/pull/10530

Có thể đặt ngày hết hạn với $ cookieStore.put (...), ít nhất họ đề xuất rằng ...

CHỈNH SỬA: Tôi gặp phải "sự cố" là bạn không thể kết hợp $ cookie với mô-đun góc-cookie. Vì vậy, nếu bạn đặt một cookie với ipCookie(...)truy xuất nó với ipCookie(...)bởi vì với $ cookie, nó sẽ trả về undefined.

— Paulo Oliveira
nguồn
0

Bạn có thể sử dụng https://github.com/ivpusic/angular-cookie

Trước tiên, bạn cần đưa ipCookie vào mô-đun góc cạnh của mình.

var myApp = angular.module('myApp', ['ipCookie']);

Và bây giờ, chẳng hạn nếu bạn muốn sử dụng nó từ bộ điều khiển của mình

myApp.controller('cookieController', ['$scope', 'ipCookie', function($scope, ipCookie) {
  // your code here
}]);

Để tạo sử dụng cookie

ipCookie(key, value);

Giá trị hỗ trợ chuỗi, số, boolean, mảng và đối tượng và sẽ được tự động tuần tự hóa vào cookie.

Bạn cũng có thể đặt một số tùy chọn bổ sung, chẳng hạn như số ngày khi cookie hết hạn

ipCookie(key, value, { expires: 21 });
— Andy M.
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.