AngularJS访问localStorage异常：登录后需刷新才显示用户信息

这个问题的核心原因是你在sessionController里没有正确利用ngStorage提供的$localStorage服务，反而手动读取window.localStorage，再加上不必要的Promise包裹同步操作，导致首次进入页面时读取到的是旧数据（null）。

具体问题点： #

• 不必要的Promise包裹同步操作：读取localStorage是同步操作，完全不需要用Promise。而且你在控制器初始化时就立即执行了这个Promise，这时候路由跳转后的localStorage数据还没被ngStorage同步，或者说手动读取的时机不对。
• 手动读取window.localStorage而非使用$localStorage服务：ngStorage的$localStorage是和浏览器localStorage双向绑定的，它会自动处理数据的序列化/反序列化和前缀（比如ngStorage-），手动读取容易出现同步问题。
• 多余的$scope.$apply()调用：ng-init是在AngularJS的digest循环内执行的，调用$apply()会导致潜在的循环冲突，完全没必要。

修复步骤： #

1. 简化sessionController，直接使用$localStorage服务

把原来复杂的Promise逻辑删掉，直接通过$localStorage.userData获取用户数据，同时添加监听确保数据更新时视图同步：

application.controller('sessionController', function($scope, $location, $http, $localStorage, $window) {
    // 控制器初始化时直接从$localStorage加载数据
    $scope.currentUserData = $localStorage.userData;

    // 监听$localStorage.userData的变化，实时更新视图
    $scope.$watch(function() {
        return $localStorage.userData;
    }, function(newUserData) {
        $scope.currentUserData = newUserData;
    });

    // 保留getData方法用于手动刷新（如果需要）
    $scope.getData = function() {
        $scope.currentUserData = $localStorage.userData;
        console.log($scope.currentUserData);
    };
});

2. 优化路由（可选但推荐）

给/profile路由添加resolve，确保只有登录用户才能访问，并且进入页面时数据已经准备就绪：

.when('/profile', {
    templateUrl: "views/profile.html",
    controller: "sessionController",
    resolve: {
        userData: function($localStorage, $location) {
            // 如果没有用户数据，强制跳转到登录页
            if (!$localStorage.userData) {
                $location.path("/login");
                return;
            }
            return $localStorage.userData;
        }
    }
})

然后在sessionController中注入userData，直接赋值：

application.controller('sessionController', function($scope, $location, $http, $localStorage, $window, userData) {
    $scope.currentUserData = userData;

    // 监听数据变化
    $scope.$watch(function() {
        return $localStorage.userData;
    }, function(newUserData) {
        $scope.currentUserData = newUserData;
    });

    $scope.getData = function() {
        $scope.currentUserData = $localStorage.userData;
        console.log($scope.currentUserData);
    };
});

3. 检查loginController的赋值逻辑

确保登录成功后正确设置$localStorage.userData：

$http.post('/login', $scope.formData).then(function(response) {
    console.log('登录成功，用户数据:', response.data);
    $localStorage.userData = response.data;
    $location.path("/profile");
}).catch(function(response) {
    console.log('登录失败:', response);
    $location.path("/login");
    $scope.error = "登录失败，请检查邮箱和密码";
});

为什么这样修复有效？ #

• $localStorage是ngStorage提供的双向绑定服务，它会自动同步浏览器localStorage的数据，避免手动读取的同步问题。
• 控制器初始化时直接赋值，结合$watch监听数据变化，确保视图始终能获取到最新的用户数据。
• 路由resolve提前验证用户状态，既保护了路由权限，又保证进入页面时数据已就绪。

这样修改后，首次登录跳转到个人主页时，用户名等信息会直接显示，不需要刷新页面。

内容的提问来源于stack exchange，提问作者vinkki