如何显示来自localStorage的当前数据？

Question

我可以从 localStorage 登录、注销并显示已登录的用户信息，但是如果我使用不同的用户应用程序注销并再次登录，则会显示以前用户的信息！这不应该发生，因为我可以在 localStorage 中看到新的用户数据。如果我手动刷新页面，新数据会正确显示！

我需要这个应用程序来显示当前登录的用户数据，因为它已经在 localStorage 中可用..

routes.js

angular.module('app.routes', [])

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider

  .state('menu', {
    url: '/side-menu',
    templateUrl: 'templates/menu.html',
    controller: 'menuCtrl'
  })

  .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html',
    controller: 'loginCtrl'
  })

  .state('menu.welcome', {
    url: '/welcome',
    views: {
      'side-menu21': {
        templateUrl: 'templates/welcome.html',
        controller: 'welcomeCtrl'
      }
    }
  })

$urlRouterProvider.otherwise('/user-type')

});

登录： 在这里，我通过 Web 服务对用户进行身份验证，该服务以 JSON 格式发回用户对象，该对象存储在 localStorage 中，键为“user”，并且工作正常。

.controller('loginCtrl', ['$scope', '$stateParams', '$state', '$http', 
    function ($scope, $stateParams, $state, $http) {
        $scope.user = {
            username: '',
            password: ''
        };
        $scope.login = function(){
            var apiUrl = "...";
            return $http.post(apiUrl, $scope.user).then(function(response){
                window.localStorage.setItem('user', angular.toJson(response.data));
                $state.go('menu.welcome');
            });
        };
    }
])

退出： 在这里，我通过从 localStorage 中删除 'user' JSON 对象来注销用户，并将他重定向回登录状态，它工作正常。

.controller('menuCtrl', ['$scope', '$stateParams', '$state', 
    function ($scope, $stateParams, $state) {
        $scope.user = angular.fromJson(window.localStorage.getItem('user'));
        $scope.logout = function(){
            // here i'm removing user from localStorage
            window.localStorage.removeItem('user');
            $state.go('login');
        };
    }
])

菜单： 在这里，我正在显示从“menuCtrl”发送的用户信息（即使它在 localStorage 中可用，它也不会在此处更新登录用户的数据）

<h3 id="menu-heading1" class="left-menu-headings">{{user.first_name}} {{user.last_name}}</h3>
<h4 id="menu-heading2" class="left-menu-headings">{{user.email}}</h4>

我已经在注销功能中尝试了以下操作，但没有成功：

$window.localStorage.clear();
$ionicHistory.clearCache();
$ionicHistory.clearHistory();

知道为什么它不显示来自 localStorage 的当前数据吗？

Answer 1

使用 ion view enter 定义你的用户

$scope.$on( "$ionicView.enter", function( scopes, states ) {
        $scope.user = angular.fromJson(localStorage.get("user"));
    });

从控制器声明中删除集合。 这将使用户在每次进入时加载，而不是每次控制器初始化时加载

Answer 2

清空或删除 $scope.user

.controller('menuCtrl', ['$scope', '$stateParams', '$state', '$window',
function ($scope, $stateParams, $state) {
    $scope.user = angular.fromJson(window.localStorage.getItem('user'));
    $scope.logout = function(){
        // here i'm removing user from localStorage
        $window.localStorage.removeItem('user');
        $state.go('login');

        delete $scope.user;

        /*or $scope.user = {}*/

    };

    $scope.login = function(){
        var apiUrl = "...";
        return $http.post(apiUrl, $rootScope.user).then(function(response){
            $window.localStorage.setItem('user', angular.toJson(response.data));
            // update $rootScope.user:
            $rootScope.user =  angular.fromJson($window.localStorage.getItem('user'));
            $state.go('menu.welcome');
        });
    };
}
])

Answer 3

使用 $rootScope：

这个问题主要是由于menuController被视图共享并且没有被重新加载，在这种情况下，您可以使用$rootScope.user，它不像$scope.user被所有控制器共享，使用如下：

注销控制器

.controller('menuCtrl', ['$scope', '$stateParams', '$state', 
function ($scope, $stateParams, $state, $rootScope) { // <-- add $rootScope

    // use $rootScope.user instead of $scope.user
    $rootScope.user = angular.fromJson(window.localStorage.getItem('user'));

    // rest of your code is fine.
    $scope.logout = function(){
        // here i'm removing user from localStorage
        window.localStorage.removeItem('user');
        $state.go('login');
    };
 }

登录控制器

.controller('loginCtrl', ['$scope', '$stateParams', '$state', '$http', 
    function ($scope, $stateParams, $state, $http, $rootScope) { // <-- add $rootScope
        // $scope.user = { <-- change to $rootScope
        $rootScope.user = {
            username: '',
            password: ''
        };

        $scope.login = function(){
            var apiUrl = "...";
            return $http.post(apiUrl, $rootScope.user).then(function(response){
                window.localStorage.setItem('user', angular.toJson(response.data));
                // update $rootScope.user:
                $rootScope.user =  angular.fromJson(window.localStorage.getItem('user'));
                $state.go('menu.welcome');
            });
        };
    }
])

Answer 4

根据您的控制器名称，我有一个疯狂的猜测，“menuCtl”实际上是在重新登录期间存在的，因此它永远不会重新初始化。您应该在

周围添加一些 console.logs

$scope.user = angular.fromJson(window.localStorage.getItem('user'));

在您重新登录时查看它是否被第二次调用。如果没有，您可能需要遵循许多选项，例如，向控制器添加事件侦听器，并在登录/注销时广播事件，以便控制器刷新其范围数据。