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

IT story

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

hot-time 2020. 4. 13. 08:22

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

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

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

이 답변은 안정적인 최신 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>

단계는 다음과 같습니다.

포함 angular.js
포함 angular-cookies.js
ngCookies앱 모듈에 삽입 하고 ng-app속성 에서 해당 모듈을 참조하는지 확인하십시오.
컨트롤러에 $cookies또는 $cookieStore매개 변수 추가
도트 (.) 연산자를 사용하여 쿠키를 멤버 변수로 액세스하십시오 .-- 또는-
cookieStoreput / get 메소드를 사용하여 액세스

쿠키 값을 설정하고 얻는 방법입니다. 이것이 내가이 질문을 찾았을 때 원래 찾고 있던 것입니다.

우리는 $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>

버전 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'없이)에 또 다른 패키지가 있습니다.

참고로, $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>

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

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

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 에서 참조했습니다 .

각도 쿠키 라이브러리 추가 : 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'); }

원래 허용 된 답변은 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

다음은 $ 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");
        };
    }]);

})();

참고 URL : https://stackoverflow.com/questions/10961963/how-to-access-cookies-in-angularjs

'IT story' 카테고리의 다른 글

Azure 웹 사이트와 Azure 웹 역할의 차이점 (0)	2020.04.13
HTML5 Canvas를 서버에 이미지로 저장하는 방법은 무엇입니까? (0)	2020.04.13
Visual Studio Code에 책갈피가 있습니까? (0)	2020.04.13
많은 디스크 공간을 차지하는 Android SDK 폴더. (0)	2020.04.13
자바의 URL에서 JSON을 읽는 가장 간단한 방법 (0)	2020.04.13

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

hot-time

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

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

'IT story' 카테고리의 다른 글

'IT story'의 다른글

티스토리툴바

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

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

'IT story' 카테고리의 다른 글

'IT story'의 다른글

관련글

티스토리툴바