Local storage not working after login

#1

Hi,

I’m building a login form and when the user enters the correct user and password a page is displayed.
It’s working.
But when the login occurs I save the user data using localstorage.

For some reason the data inside localstorage is only displayed when I refresh the page.
How can I solve this ?

Thanks.

#2

Localstorage is not reactive, you should manually get data from localstorage when you navigate to that page

#3

I’m getting the data from localstorage.
I have to display an image inside a sidemenu.

After login, the app is redirected to the main page with sidemenu.
When I expand the sidemenu the image is not displayed.
If I refresh the page the image is displayed.

#4

share you code, i will make changes based on your code

#5

Thanks.

Controller:

function authenticate() {
			LoginService.authenticate(vm.login, vm.password).then(function(data) {
                                $window.localStorage['user'] = JSON.stringify(data);
				$state.go('app.modules');
			});;
		};

When the app is redirected to app.modules a page with sidemenu is displayed:

<ion-header-bar class="bar-profile">
  <div class="profile">
     <!-- THIS DOESN'T WORK: USER IS UNDEFINED -->
     <!-- USER IS ONLY AVAILABLE WHEN REFRESH THE PAGE -->
    <img class="profile-picture" src="{{user.avatar_path}}" />
  </div>
</ion-header-bar>

And the data from localstorage inside appcontroller:

function AppController($scope,
		$window) {
               $scope.teste = $window.localStorage['user] 
	};
#6

the simplest way is to wrap your teste with function like below

function AppController($scope,
		$window) {
               $scope.teste =  function() { return $window.localStorage['user];}
	};

and use it in html like this

<ion-header-bar class="bar-profile">
  <div class="profile">
     <!-- THIS DOESN'T WORK: USER IS UNDEFINED -->
     <!-- USER IS ONLY AVAILABLE WHEN REFRESH THE PAGE -->
    <img class="profile-picture" src="{{teste().avatar_path}}" />
  </div>
</ion-header-bar>

this will make your view update reactively, but it is not efficient(i guess?)

could you please try this out, and let me know if it helped?

#7

Hey
Thanks for the reply
I changed my code to your example but doesn’t work

The data from localstorage still not available.

#8

I’m not sure why it didnt work for you.
I just created a new project and it works as i described

here is the some sample from starter project

.controller('ChatsCtrl', function($state, $scope, Chats) {
  // With the new view caching in Ionic, Controllers are only called
  // when they are recreated or on app start, instead of every page change.
  // To listen for when this page is active (for example, to refresh data),
  // listen for the $ionicView.enter event:
  //
  //$scope.$on('$ionicView.enter', function(e) {
  //});
  $scope.vm = {};
  $scope.onClickButton = function() {
    localStorage.setItem('userDetails', JSON.stringify($scope.vm));
    $state.go('tab.chat-detail');
  }
  $scope.chats = Chats.all();
  $scope.remove = function(chat) {
    Chats.remove(chat);
  };
})

.controller('ChatDetailCtrl', function($scope, $stateParams, Chats) {
  $scope.chat = Chats.get($stateParams.chatId);
  $scope.user = function() { return localStorage.getItem('userDetails'); };
})

The rest of the code comes with starter project, so i didnt clear them.
Check the Video to see how this code works
If it will not work you again, i can help you if you share some repo or plunker showing the problem

#9

ekhmoi9m1 Thanks.

The user variable is displayed from localstorage now.
But how can I display a key from the hash object ?

I’m just trying this but it’s not working:

{{user()["name"]}}
{{user().name}}

Hash from localstorage:

{"id":2533269,"email":"aa@aa.com","name":"John Pappa"}

#10

because localStorage stores only string, you need to parse the value

    $scope.user = function() { 
        return JSON.parse(localStorage.getItem('userDetails')); 
    };

But as i said before it is not efficient, and can slow your application.
You need to use this function on ng-init to get the values and store inside some scope variable.

#11

If I were you I shouldn’t trust localstorage for authentication. My first release used it and it is non persistent on most devices which lead to alot of bugs and complaints. My suggestion is to use sqlite: http://ngcordova.com/docs/plugins/sqlite/, could save you alot of trouble :slight_smile: