code

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

starcafe 2023. 3. 29. 21:39
반응형

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

각도란쿠키에 접속하는 JS 방법?쿠키에 대한 서비스와 모듈 모두 참조는 봤지만 예는 없습니다.

Angular가 있는지 없는지JS 표준 접근법?

이 답변은 안정적인 최신 angularjs 버전을 반영하도록 업데이트되었습니다. 가지 은 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아!$cookieStore 포장지입니다.$cookies세션 쿠키만 사용한다는 점에서 거의 동일합니다.이것이 원래의 질문에 대한 답변이지만, 로컬 스토리지나 jquery.cookie 플러그인(세밀한 제어 및 서버사이드 쿠키 실행 가능)을 사용하는 등 고려해야 할 다른 솔루션이 있습니다.에 angularjs로 묶어서 angularjs를 할 수 .$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. 점(.) 연산자 --OR --를 사용하여 멤버 변수로 쿠키에 액세스합니다.
  6. 」cookieStore/get " 사용

이렇게 하면 cookie 값을 설정하고 얻을 수 있습니다.이게 제가 처음에 이 질문을 발견했을 때 찾던 것입니다.

「」를 사용하고 .$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>

각도 권장 안 함 $cookieStore1.4 의 는, 「1.4.x」를 합니다.$cookies각이 지다입니다.$cookieStore&$cookies

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

API 의 개요에 대해서는, 「Docs」를 참조해 주세요.또한 cookie 서비스는 유효기간 설정(이 답변 참조) 및 도메인(Cookies Provider Docs 참조)과 같은 새로운 중요한 기능으로 확장되어 있습니다.

버전 1.3.x 이하에서는 $cookies의 구문이 위와 다르다는 점에 주의해 주십시오.

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

또한 bower를 사용하는 경우 패키지 이름을 올바르게 입력하십시오.

bower install angular-cookies@X.Y.Z

여기서 X를 선택합니다.Y.Z는 각도입니다.실행 중인 JS 버전입니다.바우어 "앵글 쿠키"에는 공식 앵글 패키지가 아닌 또 다른 패키지가 있습니다.

은 JSFiddle, JSFiddle을 .$cookieStorea, 2개의 컨트롤러, 2개의 컨트롤러, 1개의 컨트롤러$rootScope및 AngularjS 1.0.6.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 를 사용해 주세요.

angular cookie lib : 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'); }

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

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

여기 Angular의 몇 가지 방법이 있습니다.JS쿠키

  • get(key); // 이 메서드는 지정된 쿠키 키의 값을 반환합니다.

  • getObject(key); //이 메서드는 지정된 쿠키 키의 역직렬화된 값을 반환합니다.

  • getAll(); //이 메서드는 모든 쿠키를 포함하는 키 값 개체를 반환합니다.

  • put(key, value, [options]), //이 메서드는 지정된 쿠키 키의 값을 설정합니다.

  • remove(키, [options]), //이 메서드는 지정된 쿠키를 삭제합니다.

예

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에서 참고 자료를 가져왔습니다.

원래 승인된 답변에는 jquery.cookie 플러그인이 언급되어 있습니다.그러나 몇 달 전에 js-cookie로 이름이 변경되었고 jQuery 종속성이 제거되었습니다.그 이유 중 하나는 Angular와 같은 다른 프레임워크와의 통합을 쉽게 하기 위해서였습니다.

js-cookie를 angular와 통합하려면 다음과 같이 간단합니다.

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.filename:

<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.filename:

(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

반응형

'code' 카테고리의 다른 글

ASP.NET Core가 상태 코드와 함께 JSON을 반환합니다.  (0) 2023.03.29
여러 파일을 비스듬히 업로드하다  (0) 2023.03.29
Jackson - 인터페이스 참조 디시리얼라이제이션의 단일 실장을 지정하려면 어떻게 해야 합니까?  (0) 2023.03.29
Angular JS 인증을 받을 수 있고 받을 가치가 있나요?  (0) 2023.03.29
jQuery ajax(jsonp)는 타임아웃을 무시하고 오류 이벤트를 발생시키지 않습니다.  (0) 2023.03.29

'code'의 다른글

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

관련글

댓글

티스토리툴바