【问题标题】：store data in Session using AngularJS使用 AngularJS 在 Session 中存储数据
【发布时间】：2015-09-13 07:04:09
【问题描述】：

我正在通过创建一个小应用程序来学习 AngularJS。

我在成功登录时将用户信息存储在 sessionStorage 中。

登录控制器.JS

app.controller("LoginCntrl", function ($scope, $location, angularService) {

    $scope.Login = function () {
        var UserName = $scope.UserName;
        var Password = $scope.Password;

        var getData = angularService.LoginInformation(UserName,Password);
        getData.then(function (msg) {
            if (msg.data == '') {
                alert('no data');
            } else {
                sessionStorage.UserName = msg.dataUserName;
                $location.path('/members');
            }

        }, function (error) {
            alert('error in Login');
        });
    };
});

成功登录后，我将用户重定向到“/memberList”并在 memberlistCntrl 控制器我正在检查 sessionStorage 是否为空。如果它是空的，那么我假设用户试图在没有登录的情况下访问该站点，并且我将用户发送回登录屏幕

memberlistCntrl 中的代码

app.controller("memberlistCntrl", function ($scope, $location, allMembers) {

    if (sessionStorage.length == 0)
    {
        $location.path('/login');
        return;
    }

    $scope.MembersList = allMembers.data;

    $scope.createmember = function (path) {
        $location.path(path);
    };
});

我的问题，

检查用户是否登录是否正确？
sessionStorage 是否是在“会话”中存储数据的正确对象，以便我可以通过我的所有页面或站点访问它？
有没有更好的方法来完成同样的任务？

【问题讨论】：

标签： angularjs

【解决方案1】：

Angular 支持 $cookieStore 来存储你的值。请参考以下示例。

angular.module('cookieStoreExample', ['ngCookies'])
.controller('ExampleController', ['$cookieStore', function($cookieStore) {
  // Put cookie
  $cookieStore.put('myFavorite','oatmeal');
  // Get cookie
  var favoriteCookie = $cookieStore.get('myFavorite');
  // Removing a cookie
  $cookieStore.remove('myFavorite');
}]);

参考：https://docs.angularjs.org/api/ngCookies/service/$cookieStore

或 - 编辑：

如果你想使用 sessionStorage 进行数据存储，那么你需要使用 $window.sessionStorage。让我给你推荐一个例子。

<a href="javascript:void(0)" ng-click="addItem('111')">Add item in session</a>

$scope.addItem = function(item){
    $window.sessionStorage.setItem(id,item);
}

【讨论】：

感谢您的回答，我一定会调查 $cookieStore。我是通过使用 sessionStorage 做正确的事情还是只是一团糟？我的方法有效吗？
sessionStorage 用于 '$window' 参数。所以使用像 $window.sessionStorage.setItem(id, 'Value');
如何检索该会话值

【解决方案2】：

我的问题，

检查用户是否登录是否正确？

sessionStorage 是在“Session”中存储数据的正确对象吗？我可以通过我所有的页面或网站访问它吗？

嗯，这取决于您的用例。 sessionStorage 在页面会话结束时被清除。只要浏览器打开并在页面重新加载和恢复后仍然存在，页面会话就会持续。 在新选项卡或窗口中打开页面将导致启动新会话。

因此，如果您希望您的用户在打开另一个 tab 时注销，您可以继续使用 sessionStorgae。但是，大多数网站并非如此（在“另一个选项卡”中打开问题时，您是否会从 stackoverflow 注销？）。

还有其他~~更好的~~方法可以达到同样的效果吗？

是的。您可以使用 localStorage 或 cookies。 Stackoverflow 将此信息保存在名为 usr 的 cookie 中。

如果您使用 chrome，请打开控制台 (F12)。

转到资源 > Cookie 并删除 usr。刷新页面，您将被注销。

Gmail、facebook 使用类似的技术。

现在 AngularJS 提供$cookies 服务来获取/设置或删除 cookie。

cookies 优于 localStorage 对象来跟踪登录状态的原因是：cookie 在每个请求/响应周期中传递到服务器，因此在服务器端可用。如果您没有获得特定请求所需的 cookie，您可以简单地抛出状态 401（未授权）消息。

【讨论】：

如何在浏览器的另一个标签页中禁用会话？

【解决方案3】：

我假设您不想违反 DRY 原则并复制和粘贴检查每个控制器中的身份验证的代码

if (sessionStorage.length == 0)
{
    $location.path('/login');
    return;
}

而是尝试在一个地方使用$routeChangeStart，以防止用户在未经身份验证的情况下进入页面。

如何实现的示例：http://fdietz.github.io/recipes-with-angular-js/urls-routing-and-partials/listening-on-route-changes-to-implement-a-login-mechanism.html

【讨论】：