Angularjs sessionStorage and scope

Question

Anyone know why my scope variables aren't being updated? It's mind boggling to me. The sessionStorage variables are fine but when I define them within scope variables.. I get 'undefined' errors. I've tinkered with $scope.$apply but apparently the scope is already being digested...:S please help a newbie out.

  if(sessionStorage.loggedIn){

    $scope.user = sessionStorage.user;  
    $scope.user.gravatar = sessionStorage.gravatar;
    console.log($scope.user.gravatar);
    console.log('Session variable is active');
    $scope.loggedIn = sessionStorage.loggedIn;

  }

the full code:

app.controller('loginCtrl', ['$scope','$route','Auth','$modal','$timeout', function($scope,$route,Auth,$modal,$timeout){

  if(sessionStorage.loggedIn){

    $scope.user = sessionStorage.user;  
    $scope.user.gravatar = sessionStorage.gravatar;
    console.log($scope.user.gravatar);
    console.log('Session variable is active');
    $scope.loggedIn = sessionStorage.loggedIn;

  }

  $scope.login = function(){
    Auth.save({
      'username': $scope.username,
      'password': $scope.password
    },function(data) {
      $scope.loggedIn = true;
      $scope.user = data.user;
      $scope.user.gravatar = data.gravatar;

      sessionStorage.loggedIn = $scope.loggedIn;
      sessionStorage.user = data.user; 
      sessionStorage.gravatar = data.gravatar;
      $route.reload();

    },function(response){
      $scope.flash = response.data.flash;   
      $scope.pop = true;    
      $timeout(function(){$scope.pop = false;}, 3000);
    })

  };

  $scope.logout = function (){
    Auth.get({},function(){  
      delete sessionStorage.user;
      delete sessionStorage.gravatar;
      delete sessionStorage.loggedIn;
      $scope.loggedIn = false;
      $timeout(function(){$route.reload();}, 1000);
    })
  };


}]);

Summary of chain of events:

1) User logs in

2) Upon successful login, the user's details (json object) are stored in sessionStorage.user = data.user and the data.user variable typically contains this sort of info {id: 1, username: "user123", firstname: "", lastname: "", email: "username@gmail.com"} -the user's gravatar hash is also stored in a sessionStorage.user.gravatar variable.

3) If user logs out, sessionStorage variables are deleted.

4) However, if user is still logged in, refreshes/reloads the page (from browser), the sessionStorage variable is still active, and still contains the data, BUT for some reason, when I set scope variables eg. $scope.user = sessionStorage.user--the scope variable remains undefined--despite sessionStorage.user being perfectly viable. The issue appears to be with the scope.

can you specify the chain of events you are invoking and what the behavior you're expecting should be — adrichman, Apr 26 '14 at 15:42
can you get this into a jsfiddle, jsbin, or plunker? also important may be what browser you are using — Maslow, Apr 26 '14 at 16:17
related: http://stackoverflow.com/questions/9742395/scope-of-sessionstorage-and-localstorage — Maslow, Apr 26 '14 at 16:18
@JimmyRare yes, I can confirm it is an json object eg. `{id: 1, username: "user123", firstname: "", lastname: "", email: "username@gmail.com"}` — Tourshi, Apr 26 '14 at 16:38
@Maslow Sorry, it's going to be tricky to put it into a jsFiddle..I will do as adrichman suggested, which is to specify the chain of events — Tourshi, Apr 26 '14 at 16:39
This line is absolutely updating a scope variable: `$scope.user = sessionStorage.user`. It may be that the value you are setting it to is undefined. Or that when you check the value on the scope, you're accessing a different scope. Try printing `sessionStorage.user` to the console, before doing the assignment to the scope variable. Try printing `$scope.$id` to the console before the assignment, and then print out the $id where ever it is you are seeing the problem ... Are they the same? You can debug this! :) — Sunil D., Apr 26 '14 at 16:55

score 44 · Accepted Answer · answered Apr 26 '14 at 20:33

44

You need to serialize your user object to JSON before storing on sessionStorage, because it is implemented as a collection of string values.

Try something like this

 sessionStorage.user = JSON.stringify($scope.user);

and then

 $scope.user = JSON.parse(sessionStorage.user);

answered Apr 26 '14 at 20:33

spacemigas

791
8
10

14

Sidenote: There is [`angular.fromJson( json );`](https://docs.angularjs.org/api/ng/function/angular.fromJson) also. – kaiser Sep 26 '14 at 00:06

score 6 · Answer 2 · edited Dec 18 '18 at 15:56

6

Nowadays angularjs don't have the JSON.stringify just assign the $scope values in sessionStorage

$sessionStorage.user = $scope.user;

For Detailed documentation on $sessionStorage service

AngularJS - $sessionStorage by Scriptwerx is a service for use in your AngularJS applications.

npm install --save-dev angular-swx-session-storage

edited Dec 18 '18 at 15:56

Community

1
1

answered May 20 '16 at 07:19

Pulithevan S

67
1
2

Angularjs sessionStorage and scope

2 Answers2

Linked