1. ホーム
  2. angularjs

[解決済み】AngularJSでクッキーにアクセスする方法は?

2022-04-04 11:31:43

質問

AngularJSでCookieにアクセスする方法は何ですか? 私はクッキーのためのサービスとモジュールの両方への参照を見たことがありますが、例はありません。

AngularJSの標準的なアプローチはあるのか、ないのか?

解決方法は?

この回答は、最新の安定したangularjsのバージョンを反映するために更新されました。重要な注意点として $cookieStore を囲む薄いラッパーです。 $cookies . これらは、セッション・クッキーでのみ動作するという点では、ほとんど同じです。これは元の質問に対する答えですが、localstorageやjquery.cookieプラグイン(より細かい制御とサーバーサイドのクッキーを行うことができる)の使用など、検討したい他のソリューションがあります。もちろん、angularjsでこれを行うことは、おそらくそれらをサービスでラップして $scope.apply を使用して、モデルへの変更をangularに通知します(場合によっては)。

もう一つ注意点があり、それは、データを引き出す際に $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. ドット(.)演算子を使って、Cookieをメンバ変数としてアクセスします。 -- OR --
  6. アクセス cookieStore put/get メソッドを使用した