Question

我在AngularJS服务中设置本地存储值并尝试获取AngularJS控制器中的值。但是在控制器中，获取空值而不是我在服务中设置的值。

以下是我设置本地存储空间值的服务：

app.factory('accountService', ['$http', '$q', 'serviceBasePath', 'userService', '$window', function ($http, $q, serviceBasePath, userService, $window) {
    var fac = {};
    fac.login = function (user) {
        var obj = { 'username': user.username, 'password': user.password, 'grant_type': 'password' };
        Object.toparams = function ObjectsToParams(obj) {
            var p = [];
            for (var key in obj) {
                p.push(key + '=' + encodeURIComponent(obj[key]));
            }
            return p.join('&');
        }

        var defer = $q.defer();
        $http({
            method: 'post',
            url: serviceBasePath + "/token",
            data: Object.toparams(obj),
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function (response) {
            userService.SetCurrentUser(response.data);

            // The local storage value I have set

            localStorage.setItem('IsAuthenticated', true);
            localStorage.setItem('userName', response.username);

            defer.resolve(response.data);
        }, function (error) {
            defer.reject(error.data);
        })
        return defer.promise;
    }
    fac.logout = function () {
        userService.CurrentUser = null;
        userService.SetCurrentUser(userService.CurrentUser);

    }
    return fac;
}])

以下是我尝试获取以前设置的本地存储空间值的控制器：

app.controller('indexController', ['$scope', 'accountService', '$location', '$window', function ($scope, accountService, $location, $window) {

    $scope.message = localStorage.getItem("IsAuthenticated");   
    console.log($scope.message);

    $scope.logout = function () {
        accountService.logout();
        $location.path('/login');
    }

 }])

问题是我获取空值而不是我在服务中设置的值。

请帮助！

Answer 1

使用angular处理浏览器存储的最佳方法是：

1）使用通过服务公开的通用方法创建一个处理localStorage，sessionStorage，cookie的服务。

2）此服务将由控制器特定服务使用，此服务还处理将用于存储的密钥。

3）此服务将公开控制器使用的更具体的方法。

例如：

<强> UserController中：

userService.setUserSession(session)

<强> UserService：

var SESSION_KEY = 'userSession';
setUserSession() {
    storageService.sessionStorageProvider.set(SESSION_KEY, session)
}

<强> StorageService：

// here you need to create generic method using inheritance which will expose sessionStorage and loacalStorage and cookieStorage.

Answer 2

首先尝试在工厂中获得它...在设置之后...如果你能够到达那里，那么你肯定也会进入控制器。因为本地存储与工厂或控制器无关。

Answer 3

请尝试使用 $ window 。

$window.localStorage.setItem('userName', response.username);

Answer 4

我相信你需要将依赖注入你的工厂：

app.factory('accountService', ['$http', '$q', 'serviceBasePath', 'userService', '$window', '$localStorage', function ($http, $q, serviceBasePath, userService, $window, $localStorage) {
    var fac = {};
    fac.login = function (user) {
        var obj = { 'username': user.username, 'password': user.password, 'grant_type': 'password' };
        Object.toparams = function ObjectsToParams(obj) {
            var p = [];
            for (var key in obj) {
                p.push(key + '=' + encodeURIComponent(obj[key]));
            }
            return p.join('&');
        }

        var defer = $q.defer();
        $http({
            method: 'post',
            url: serviceBasePath + "/token",
            data: Object.toparams(obj),
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
        }).then(function (response) {
            userService.SetCurrentUser(response.data);

            // The local storage value I have set

            $localStorage.IsAuthenticated = true;
            $localStorage.userName = response.username;

            //localStorage.setItem('IsAuthenticated', true);
            //localStorage.setItem('userName', response.username);

            defer.resolve(response.data);
        }, function (error) {
            defer.reject(error.data);
        })
        return defer.promise;
    }
    fac.logout = function () {
        userService.CurrentUser = null;
        userService.SetCurrentUser(userService.CurrentUser);

    }
    return fac;
}])

AngularJS中从服务到控制器的JavaScript本地存储值

4 个答案: