AngularJS 中的 Cookie答案

【问题标题】：Cookies in AngularJSAngularJS 中的 Cookie
【发布时间】：2015-07-23 18:59:42
【问题描述】：

我正在制作一个 SPA，成功登录后我设置了 cookies(username,userid,etc.)，其中包含从 api 获取的用户信息。

使用 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。

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

【问题讨论】：

只要你想调用cookie检索方法就可以了..
@pankajparkar，它适用于重新加载我想要显示 cookie 数据的页面。但问题是我想在同一页面上显示数据而不重新加载
@pankajparkar，所以，你知道我如何使用 angular 来做到这一点。我正在使用 angular 来制作 SPA。所以想在不重新加载页面的情况下访问 cookie 数据，

标签： javascript php angularjs cookies

【解决方案1】：

您应该使用ngCookies，这是最好的方法，如果您想将该数据持久保存在 DOM 的任何部分，请使用 $cookieStore

不管怎样，这里有区别

$cookieStore

提供由会话 cookie 支持的键值（字符串对象）存储。从此存储中放置或检索的对象由 angular 的 toJson/fromJson 自动序列化或反序列化。

$cookies

提供对浏览器 cookie 的读/写访问权限。

用法，与@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 cmets，他是对的，$cookieStore 已被弃用，所以继续使用几乎相同的$cookies。

【讨论】：

$cookieStore 已弃用：/
我认为现在是$cookies docs.angularjs.org/api/ngCookies/service/$cookies
@lucky7id 我目前在我正在开发的移动应用程序中使用$cookieStore。
@TheUnnamed 它在 1.3.x 之后已被弃用，这取决于您查看的文档版本。

【解决方案2】：

我建议使用ngCookies，它可以为您完成很多工作，包括会话 cookie。

此外，在成功登录后，您可能只想在 JS 中的回调中写入 cookie。

【讨论】：

我的做法和你的建议一样。cookie 是用 JS 完美编写的，但是如何使用 angular 在同一页面中显示它。
$cookies 服务具有get() 和getObject() 方法，您只需将存储cookie 的密钥传递给适当的方法。 docs.angularjs.org/api/ngCookies/service/$cookies
我通过了，但是如何在不刷新应用程序的情况下向用户展示它。
@RohitJindal 您能否更新您的帖子以显示您在何处添加了 $scope 绑定和相应的标记？