javascript - AngularJS 中的 Cookie

我正在制作 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>

它适用于重新加载应用程序。重新加载时，我们能够检索 cookie 数据( username )。

问题:

我们如何在不重新加载应用程序的情况下检索这些 cookie。

任何帮助将不胜感激。
谢谢

最佳答案

您应该使用 ngCookies ，这是最好的方法，如果您想将该数据保留在 DOM 的任何部分，请使用 $cookieStore
无论如何，这里是差异
$cookieStore

$cookies

用法，与@Dan Doyon answer 分开

<!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']);

更新

根据@lucky7id 的评论，他是对的，不推荐使用 $cookieStore，所以继续使用几乎相同的 $cookies。