javascript - AngularJs 服务，无法在本地存储

Question

我正在尝试将经过身份验证的用户保存到服务本地的变量中，但在第二次访问时无法看到相同的值。这是代码，

app.factory('Auth', ['$http', '$state',
function ($http, $state) {
    var currentUser = null;
    var authenticated = false;

    var setCurrentUser = function (user, flag) {
        currentUser = {};
        angular.extend(currentUser, user);
        authenticated = flag;
    };

    var getAuthenticated = function () {
        return authenticated;
    };

    var getCurrentUser = function () {
        return currentUser;
    };

    return {
        login: function (user, success, error) {
            $http.post(UserApi.login().url, user).success(function (user) {
                setCurrentUser(user, true);
                window.location.replace('/');
            }).error(error);
        },
        logout: function (success, error) {
            $http.post(UserApi.logout().url).success(function () {
                setCurrentUser(null, false);
                window.location.replace('/');
            }).error(error);
        },
        isAuthenticated: function () {
            if (getAuthenticated() && getCurrentUser() != null) return true;
            return false;
        }
    };
}]);

我希望在登录到 currentUser 并且状态为 authenticated 后存储用户详细信息， 当我尝试检查用户登录状态时，这两个变量持有 null 和 false，所以我失去了用户状态。那么如何正确地存储和检索数据以确保用户处于登录状态。

Answer 1

如评论中所述，Angular 服务是在页面内存中运行的 JavaScript 应用程序的一部分，因此只要您刷新页面，该服务就会重建。您必须选择持久性方案并使用其 API 才能在页面加载期间持久化任何内容。

您有几个选择:

• sessionStorage:一直存在到您关闭浏览器窗口，但可以在页面之间使用。但是，打开同一 URL 的新选项卡将获得一个新的空 session 存储对象。这是一个很好的选择，仅适用于跨页面刷新传输数据。
• localStorage:在同一域的窗口/选项卡之间保持不变，下次您打开浏览器时它仍然存在。
• $cookieStore:一个对 cookie 的 Angular 包装器，它与 sessionStorage 类似，只是小得多，并且包含在对服务器发出的任何请求中。
• > Many more esoteric choices并非所有浏览器都支持。该文章还很好地概述了网络存储选择。

实际上这与 Angular 关系不大，只是一个 JavaScript 持久性问题。

这是您使用 localStorage 的代码的一个小示例，可以帮助您入门:

var data = angular.fromJson(localStorage['my-storage-key']) || {
    currentUser: null,
    authenticated: false
};

var save = function () {
    localStorage['my-storage-key'] = angular.toJson(data);
};

var setCurrentUser = function (user, flag) {
    data.currentUser = {};
    angular.extend(data.currentUser, user);
    data.authenticated = flag;
    save();
};

var getAuthenticated = function () {
    return data.authenticated;
};

var getCurrentUser = function () {
    return data.currentUser;
};