AngularJS中的Cookie

Question

我正在制作SPA，在成功登錄時我設置了包含從api獲取的用戶信息的cookies(username,userid,etc.) 。

使用PHP設置cookie：

setcookie("NAME",$records['userinfo']['name'],time()+(20 * 365 * 24 * 60 * 60));

使用javascript獲取它：

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

嘗試在Controller中顯示：

angular.module('App', [])

  .controller('UserProfileCtrl', function($scope) {
     function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}
 $scope.username = getCookie('NAME');
  })

index.html：

<html data-ng-app="App" data-ng-controller="AppCtrl">
  <head>
    <link rel="stylesheet" type="text/css" href="css/app.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
    <script src="js/app.js"></script> 
  </head>
  <body data-ng-class="{'skip-animations':disabled}" class="ng-cloak">
        <div class="list-group" data-ng-controller="UserProfileCtrl">
       <p>Welcome</p>
        <div class="username">{{username}}</div>
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 user">
        <div class="user-bg-image">
        <img src="images/user-bg.png">
        <div class="user-img"><img src="{{userimage}}">
        </div>
        </div>
        </div>
        <ul class="user-profile clearfix">
        <a href="#123"><li>Edit Profile</li></a>
        <a href="#123" onclick="logout()"><li>Logout</li></a>
        </ul>
        </div>
    </body>
</html>

它可以很好地重新加載app.On重新加載我們能夠檢索cookie數據（ username ）。

問題：

如何在不重新加載應用程序的情況下檢索這些cookie。

任何幫助將不勝感激。 謝謝

Answer 1

你應該使用ngCookies ，這是最好的方法，如果你想在DOM的任何部分保存這些數據，請使用$cookieStore

無論如何，這里是差異

$cookieStore

提供由會話cookie支持的鍵值（字符串對象）存儲。 從此存儲中放入或檢索的對象將由angular的toJson / fromJson自動序列化或反序列化。

$cookies

提供對瀏覽器cookie的讀/寫訪問。

用法，離開@Dan Doyon 回答

<!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.module('myApp', ['ngCookies']);

UPDATE

根據@ lucky7id評論，他是對的， $cookieStore已被棄用，所以只需繼續使用幾乎相同的$cookies 。

Answer 2

我建議使用ngCookies ，它為你做了很多這方面的工作，包括會話cookie。

此外，成功登錄后，您可能只想在回調中的JS中編寫cookie。

AngularJS中的Cookie

問題描述

2 個解決方案

解決方案1
2 已采納 2015-05-12 18:42:10

解決方案2
0 2015-05-12 18:34:15

AngularJS中的Cookie

問題描述

2 個解決方案

解決方案1 2 已采納 2015-05-12 18:42:10

解決方案2 0 2015-05-12 18:34:15

解決方案1
2 已采納 2015-05-12 18:42:10

解決方案2
0 2015-05-12 18:34:15