how to access saved data in $localStorage in angularjs

Question

i am working on MEAN app, after successful user login i want to save returned user data in localStorage in browser so that i can use it further, i am using ngStorage module. where i am able to save user data in browser's localstorage. here is my code in LoginController :

 function loginController($http, $location, $rootScope,$localStorage){
    var vm = this;
    vm.signIn = signIn;

 function signIn() {      
    $http({
        url: '/login',
        method: 'post',
        data: vm.login
    }).then(function(respond) { 
     if(respond.data){ 
        $localStorage.userData = respond.data;   
         var info = $localStorage.userData;         
        $rootScope.userInfo = info; 
         $location.path('/dashboard/'+respond.data._id);
      }else{
         $location.path('/');
        }

no when i access $rootScope in my another controller i can get value that is stored in $localStorage. even in my chrome browser i can see from inspect that data is stored in $localStorage. BUT when i refresh my page i can see there is still data in browser in localStorage but not in my $rootscope. my rootScope gets null data after page refreshing, i would really appreciate any suggestion on how to access those data and stored in rootScope.

Answer 1

As, i have said, $rootScope gets destroyed when you reload the location like any javascript variable. Your localStorage data is accessible everywhere throughout your application until you destory, remove, or reset it.

    function loginController($http, $location, $rootScope, $localStorage) {
                var vm = this;
                vm.signIn = signIn;

                function signIn() {
                    $http({
                            url: '/login',
                            method: 'post',
                            data: vm.login
                        }).then(function(respond) {
                                if (respond.data) {
                                    $localStorage.userData = respond.data;
                                    var info = $localStorage.userData;
                                    $rootScope.userInfo = info;
                                    $location.path('/dashboard/' + respond.data._id);
                                } else {
                                    $location.path('/');
                                }

      function anyController($scope, $localStorage) {
                                       console.log($localStorage.userData);
                                    }

An example where you redirect to the main state if there is no userData where you are accessing the data via $localStorage in the module run function.

angular.module("yourAppName")
  .run(function ($rootScope, $state,$localStorage) {
    $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
      if(toState.name == 'app') return;
      if (!$localStorage.userData){
        $state.transitionTo("app");
        event.preventDefault(); 
        return;
      }
    });
  });