AngularJS 中的 Cookie

Question

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

尝试在控制器中显示：

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，它会为您做很多这样的工作，包括会话 cookie。

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

Answer 2

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

无论如何，这是不同之处

$cookieStore

Provides a key-value (string-object) storage, that is backed by session cookies. Objects put or retrieved from this storage are automatically serialized or deserialized by angular's toJson/fromJson.

$cookies

Provides read/write access to browser's 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。

AngularJS 中的 Cookie

Cookies in AngularJS

javascript

php

cookies

angularjs