web-dev-qa-db-ja.com

AngularJSの$ cookieが持続しない

ユーザー名を記憶する機能を備えたログインフォームがあります。チェックボックスをオンにするだけで、次の方法でCookieが保存されます。

$scope.toggleCookie = function()
{
    //-- $scope.remember is the model for the checkbox
    $cookieStore.put('remember', $scope.remember);
    if (!$scope.remember) $cookieStore.remove('email');
}

ユーザーがログインページに戻ったら、最初にremember Cookieを確認します。

$scope.remember = ($cookieStore.get('remember') == null || $cookieStore.get('remember') == false) ? false : true;

次に、email Cookieに値があるかどうかを確認します。

$scope.email = ($cookieStore.get('email') != null) ? $cookieStore.get('email') : '';

上記のすべてが正常に機能しているので、チェックしてログインし、ログアウトすると、入力フィールドにユーザー名が表示されます。チェックを外して、ログインしてログアウトすると、ユーザー名が消えてしまいます。

また、chrome dev toolsのresources-> cookiesタブでこの状況が発生していることも確認できます。

ページを更新できますが、チェックするとユーザー名が表示されます。

私の問題は、Chromeを閉じて再度開くと、すべてのCookieデータが失われるということです。どうしてこれなの？そもそもクッキーの経験はあまりありません。

javascriptangularjscookies
14
Ronnie

Angular v1.4では、最終的に最後にCookieのオプションを設定できます。これは非常に簡単な例です。

var now = new $window.Date(),
    // this will set the expiration to 6 months
    exp = new $window.Date(now.getFullYear(), now.getMonth()+6, now.getDate());

$cookies.put('yourCookie','blabla',{
  expires: exp
});

var cookie = $cookies.get('yourCookie');
console.log(cookie); // logs 'blabla'

このコードを実行した後にCookieを確認すると、yourCookieという名前のCookieに有効期限が正しく設定されていることがわかります。

上記のput関数に3番目のパラメーターとして渡されたオブジェクトは、path、domain、secureの設定など、他のオプションも許可します。概要については the docs を確認してください。

21
Nobita

そのため、問題の原因となっている有効期限のようです。 AngularJS 1.2.19以降、_$cookie_または_$cookieStore_を使用して有効期限を設定することはできません。

これを解決するために、代わりにローカルストレージを使用しました。このモジュールを使用して、ローカルストレージに簡単にアクセスできるようにしました。 https://github.com/grevory/angular-local-storage

変更するのはかなり簡単でした。 $cookieStore.get('remember');をlocalStorageService.get('remember');に変更して、メソッド名を共有していることを確認します。 putの代わりにadd

3
Ronnie

ブラウザセッション全体でCookieを保持するには、有効期限を設定する必要があります。残念ながら、これはangularjs $ cookieサービスではサポートされていないようです。この投稿を参照してください： AngularJS-AngularJSでCookieの有効期限を設定する方法

3
zszep