AngularJS에서 쿠키에 액세스하는 방법?

236

쿠키에 액세스하는 AngularJS 방법은 무엇입니까? 쿠키에 대한 서비스와 모듈 모두에 대한 참조를 보았지만 예제는 없습니다.

AngularJS 정식 접근 방식이 있습니까?

angularjs  angular-cookies 
— 엘리스 화이트 헤드
소스
1
angularjs의 가장 큰 장점은 의존성 주입 측면 때문에 단위 테스트를 위해 ngCookies와 같은 것을 모의 할 수 있습니다. 당신의 발걸음을 내 주셔서 감사합니다.
— Dan Doyon 2016 년
5
@ DanDoyon 나는 config 내부의 app.js에서 같은 것을 요소 화하려고합니다. 하지만 "발견되지 않은 오류 : 알 수없는 공급자 : $ cookies"가 표시됩니다.
— Anand
@ sutikshan-dubey는 귀하의 질문을보고 코드 샘플을 제공 할 수 있습니까?
— Dan Doyon
@ DanDoyon 감사합니다. 쿠키가 내 목표, stackoverflow.com/questions/12624181/을 해결하지 못했습니다 ... 웹 저장을 사용하여 수정했습니다. 이것은 나를 도왔습니다 -people.opera.com/shwetankd/external/demos/webstorage_demo.htm
— Anand
1
질문에 답변 을 포함시키지 말고 답변으로 게시하십시오 .
— Eliran Malka

답변:

200

이 답변은 안정적인 최신 angularjs 버전을 반영하도록 업데이트되었습니다. 한 가지 중요한 점은 $cookieStore주변을 둘러싼 얇은 포장지 $cookies입니다. 세션 쿠키로만 작동한다는 점에서 거의 동일합니다. 비록 이것이 원래의 질문에 대한 대답이지만, localstorage 또는 jquery.cookie 플러그인 (보다 세밀한 제어를 제공하고 서버 측 쿠키를 제공하는)과 같은 다른 솔루션을 고려할 수도 있습니다. 아마도 서비스에서 그것들을 감싸고 $scope.apply모델에 대한 변경 사항을 각인에게 알리는 데 사용하려고 할 것입니다 (경우에 따라).

또 다른 참고 사항은 $cookie값을 저장 하는 데 사용했는지 또는 에 따라 데이터를 가져올 때 둘 사이에 약간의 차이가 있다는 것입니다 $cookieStore. 물론 하나 또는 다른 것을 사용하고 싶을 것입니다.

js 파일에 대한 참조를 추가하는 것 외에도 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. cookieStoreput / get 메소드를 사용하여 액세스
— 댄 도욘
소스
4
이 답변은 더 이상 작동하지 않습니다. 다른 답변에 설명 된대로 $ cookieStore를 대신 사용해야합니다.
— Bill
감사합니다 @Bill, 아마도 1.2 가지가 변경되었을 가능성이 큽니다. 업데이트하겠습니다.
— Dan Doyon
나는 대답을 업데이트했고 @Bill $ cookieStore는 사용하기가 더 쉽지만 $ cookies는 여전히 조금 다르게 작동합니다
— Dan Doyon
1
localhost와 쿠키를 사용할 때 문제가 있다고 생각합니다). localhost 대신 시스템 이름을 사용하면 더 나은 성공을 거둘 수 있습니다.
— Dan Doyon
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

버전 1.4.x에서는 각도가 더 이상 사용되지 않으므로 최신 버전의 각도를 $cookieStore사용 $cookies하는 경우 대신 사용하십시오. $cookieStore&에 대한 구문은 동일하게 유지됩니다 $cookies. 

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

API 개요 는 문서 를 참조하십시오 . 쿠키 서비스는 만료 설정 ( 이 답변 참조 ) 및 도메인 ( CookiesProvider 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"( 's'없이)에 또 다른 패키지가 있습니다.

— Maksood
소스
14

참고로, $cookieStore두 개의 컨트롤러 a $rootScope및 AngularjS 1.0.6을 사용하여 JSFiddle을 구성했습니다 . 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>
— 켄 딤플
소스
11

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

사용하려면 http://code.angularjs.org/1.0.0rc10/angular-cookies-1.0.0rc10.js 를 포함해야 합니다.

— 앤드류 조슬린
소스
2
액세스 방법에 대한 힌트 또는이를 이해해야하는 문서에 대한 링크를 제공 할 수 있습니까? HTML에 angular-cookies.js 파일을 포함시킨 후 $cookieStore컨트롤러 (예 function AccountCtrl($scope, $cookieStore):) 의 서명에 추가 했지만 다음과 같은 오류 메시지가 나타납니다. 알 수없는 공급자 : $ cookieStoreProvider <-$ cookieStore
— Ellis Whitehead
불행히도, 나는 그것을 사용한 적이 없으며 단지 존재한다는 것을 알고 있습니다. 빠른 응답을 위해 Angular Google 그룹에 문의해야 할 수도 있습니다. groups.google.com/forum/#!forum/angular
— Andrew Joslin
3
그것은 밝혀 $cookieStore분명히 대부분 클라이언트가 생성 한 쿠키를위한 것입니다. 서버 생성 쿠키에 액세스하려면 $cookies대신 사용해야 했습니다.
— Ellis Whitehead
7
URL이 최신이 아니 었습니다. 현재 angular-cookies-는 Google 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 /…
— KajMagnus
1
이 답변 년 이상 오래되어 링크가 웹 사이트에 당신은 여기에 대답의 본질적인 부분을 게시 할 경우 더 나은 것 도움이된다, 또는 귀하의 게시물이 삭제되는 위험 동안 참조에게 간신히 더 '입니다 답변을 언급 FAQ를 링크보다. 원하는 경우 링크를 계속 포함 할 수 있지만 '참조'로만 사용할 수 있습니다. 답은 링크가 없어도 독자적으로 세워 져야합니다.
— Taryn
3

AngularJS는 브라우저 쿠키를 사용하기 위해 ngCookies 모듈과 $ cookieStore 서비스를 제공합니다.

쿠키 기능을 사용하려면 angular-cookies.min.js 파일을 추가해야합니다.

다음은 AngularJS 쿠키의 방법입니다.

  • get (키); //이 메소드는 주어진 쿠키 키의 값을 반환합니다.

  • getObject (키); //이 메소드는 주어진 쿠키 키의 역 직렬화 된 값을 반환합니다.

  • 모든 것을 가져라(); //이 메소드는 모든 쿠키와 함께 키 값 객체를 반환합니다.

  • put (키, 값, [옵션]); //이 메소드는 주어진 쿠키 키에 대한 값을 설정합니다.

  • 제거 (키, [옵션]); //이 방법은 주어진 쿠키를 제거합니다.

예

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>

자바 스크립트

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

각도 쿠키 라이브러리 추가 : 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'); }
— 앙 쿠르 라다 디야
소스
1

원래 허용 된 답변은 jquery.cookie plugin 입니다. 그러나 몇 개월 전에 이름이 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

— 페이그 너 브랙
소스
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");
        };
    }]);

})();
— 살아있는 사랑
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.