AngularJS에서 쿠키 만료일을 설정하는 방법


81
  1. 브라우저를 새로 고침 (F5) 할 때 손실되지 않는 사용자의 인증 정보를 쿠키에 저장하고자합니다.

  2. 로그인시 사용자가 "기억하기"체크 박스를 선택한 경우 "영구 쿠키"에 인증 정보를 저장하고 싶습니다.


2
당분간 나는이 목적으로 로컬 스토리지와 세션 스토리지를 사용하고 있습니다 Ref people.opera.com/shwetankd/external/demos/webstorage_demo.htm
Anand

답변:


46

이것은 ngCookies모듈을 사용하여 angular의 1.4.0 빌드에서 가능 합니다.

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

2
문서에서 명확하지 않은 경우 {'expires': expireDate});또는 .......................................... ............ [{'expires': expireDate}]);형식을 사용해야합니다 ...
Serge

2
문서 $ cookies.put (key, value, [options])의 []는 "optional"에 대한 주석입니다. 그것은 배열을 의미하지 않습니다 !!! 실제로 그들은 문서를 다시 읽으면 "옵션"이 하나의 객체 {a : x, b : y, c : z}라고 말했습니다.
Jenna Leaf

32

1.4의 경우 : 여기와 아래의 다른 주석에서 언급했듯이 1.4부터 Angular의 기본 쿠키 지원은 이제 쿠키를 편집하는 기능을 제공합니다.

38fbe3ee로 인해 $ cookies는 더 이상 현재 브라우저 쿠키 값을 나타내는 속성을 노출하지 않습니다. $ cookies는 더 이상 쿠키 변경 사항에 대해 브라우저를 폴링하지 않으며 더 이상 쿠키 값을 $ cookies 개체에 복사하지 않습니다.

폴링이 비싸고 $ cookies 속성이 실제 브라우저 쿠키 값과 올바르게 동기화되지 않는 문제가 발생했기 때문에 변경되었습니다 (폴링이 원래 추가 된 이유는 서로 다른 탭 간의 통신을 허용하기위한 것이지만 오늘날 더 나은 방법이 있습니다. , 예 : localStorage.)

$ cookies의 새로운 API는 다음과 같습니다.

get put getObject putObject getAll remove 쿠키 데이터에 액세스하려면 위의 메소드를 명시 적으로 사용해야합니다. 이는 또한 브라우저 쿠키에서 발생하는 변경 사항을 감지하기 위해 더 이상 $ cookies의 속성을 볼 수 없음을 의미합니다.

이 기능은 일반적으로 타사 라이브러리가 런타임에 쿠키를 프로그래밍 방식으로 변경하는 경우에만 필요합니다. 이에 의존하는 경우 쿠키를 변경하는 타사 라이브러리에 반응 할 수있는 코드를 작성하거나 자체 폴링 메커니즘을 구현해야합니다.

실제 구현은 호출을 통해 전달할 수 있는 $ cookiesProvider 개체 를 통해 수행됩니다 put.

1.3 이하의 경우 : jQuery 플러그인을로드하지 않기 위해 최선을 다한 사용자에게는 angular의 멋진 대체물 인 것으로 보입니다-https: //github.com/ivpusic/angular-cookie


Angular 1.3 이하를 사용할 때 훌륭한 솔루션입니다.
vegemite4me 2015-06-29

27

Angular v1.4에서는 마지막으로 만료와 같은 쿠키에 대한 몇 가지 옵션을 설정할 수 있습니다 . 다음은 매우 간단한 예입니다.

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'

이 코드를 실행 한 후 쿠키를 확인하면 만료 시간이라는 쿠키로 올바르게 설정되는 것을 볼 수 있습니다 someToken.

put위 의 함수에 세 번째 매개 변수로 전달 된 객체는 setting path, domain및 같은 다른 옵션도 허용합니다 secure. 개요 는 문서 를 확인하십시오 .

추신 - $cookieStore더 이상 사용되지 않는 마음을 업그레이드하는 경우 에는 $cookies이제 쿠키를 처리하는 유일한 방법입니다. 참조 문서를


15

일부 사람들은 쿠키 수명의 추가 기간을 알고 있으므로 추가 예제를 제공하고 싶습니다. 즉. 쿠키를 10 분 이상 또는 1 일 이상 지속하도록 설정하려고합니다.

일반적으로 쿠키가 몇 초 안에 얼마나 오래 지속되는지 이미 알고 있습니다.

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

평소와 같이 검색 할 수 있습니다.

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

비어 있으면 undefined를 반환합니다.

연결;

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


1
어디 today에서 왔습니까?
Thomas Kekeisen 2016

나는 코드를 더 멋지게 만들려고 노력했고 모든 '지금'을 오늘로 바꾸는 것을 잊었다. 이제 괜찮을 것입니다.
Andreas Panagiotidis 2016

질문이 있습니다. 쿠키에서 값을 얻을 때 만료 날짜를 확인해야 $cookies합니까? 아니면 값이 만료되면 자동으로 undefined를 반환해야합니까?
hadi.mansouri

3

angular.js 스크립트로 이동하여 쿠키 삽입
검색을 self.cookies = function(name, value) { 변경할 수 있습니다. 예를 들어 7 일 동안 쿠키를 추가하는 코드를 변경할 수 있습니다.

 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

2

나는이 질문이 조금 오래되었고 이미 받아 들여진 대답이 있다는 것을 알고 있습니다.

그러나 여전히 (jQuery 또는 순수한 Javascript에 관한 것이 아니라) 어려움을 겪고있는 현재 문제입니다.

그래서 몇 가지 연구 끝에 다음을 발견했습니다 : https://github.com/ivpusic/angular-cookie

$ cookieStore와 매우 유사한 "인터페이스"를 제공합니다. 만료 날짜 (값 및 단위)를 구성 할 수 있습니다.

$ cookie 또는 $ cookieStore의 만료 날짜에 대한 앵귤러 네이티브 지원에 대해 "그들은"1.4에서이 주제에 대한 업데이트를 약속합니다. https://github.com/angular/angular.js/pull/10530

$ cookieStore.put (...)으로 만료일을 설정할 수 있습니다. 적어도 그들은 제안합니다 ...

편집 : $ cookies와 angular-cookie module을 혼합 할 수없는 "문제"가 발생했습니다. 따라서 ipCookie(...)검색 으로 쿠키를 설정하면 ipCookie(...)$ cookie를 사용하면 undefined.



0

https://github.com/ivpusic/angular-cookie를 사용할 수 있습니다.

먼저 angular 모듈에 ipCookie를 주입해야합니다.

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

이제 예를 들어 컨트롤러에서 사용하려는 경우

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

쿠키 사용을 생성하려면

ipCookie(key, value);

이 값은 문자열, 숫자, 부울, 배열 및 객체를 지원하며 자동으로 쿠키에 직렬화됩니다.

쿠키 만료일과 같은 몇 가지 추가 옵션을 설정할 수도 있습니다.

ipCookie(key, value, { expires: 21 });
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.