[解決済み】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>
という手順です。
-
インクルード
angular.js
-
インクルード
angular-cookies.js
-
インジェクト
ngCookies
をアプリのモジュールに追加します (そして、そのモジュールをng-app
属性を使用します)。 -
を追加します。
$cookies
または$cookieStore
パラメータをコントローラ - ドット(.)演算子を使って、Cookieをメンバ変数としてアクセスします。 -- OR --
-
アクセス
cookieStore
put/get メソッドを使用した
関連
-
[解決済み] md-selectでデフォルト値を設定する方法
-
処理されない例外が発生しました。Angular 実行中のプロジェクトで NGCC に失敗しました。
-
angularjs が src で指定されたコンテンツを iframe 内で正しく表示しない
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] 入力フィールドにフォーカスを当てるには?
-
[解決済み] 検索エンジンはAngularJSアプリケーションをどのように扱っているのか?
-
[解決済み] なぜAngularJSはselectに空のオプションを含めるのですか?
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Angular ui-routerで$stateメソッドを$stateChangeStart toStateとfromStateで使用する。
-
[解決済み] AngularJs ReferenceError: $http is not defined
-
[解決済み] ag-gridの行の追加/削除
-
[解決済み] シンプルなangularjsの日付入力
-
[解決済み] ng-repeat内で$indexを使用して、クラスを有効にしてDIVを表示するにはどうすればよいですか?
-
[解決済み] AngularJsでng-Cloakディレクティブを実際に使用する方法とは?
-
[解決済み] Apigee API へのリクエストで 401 レスポンスエラーが発生する
-
[解決済み] AngularJSの.$on()とは?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] ServiceとFactoryで迷う