AngularJS: data binding between expressions and sessionstorage

Question

I'm new to Angular. I have a single page application with a navbar which maps to some html "sections". Each section is visualized monitoring the state of a variable by the Angular directives ng-show.

After the first load all my sections are loaded and all HTML is in the browser. Now I can do some operations and save an object in sessionStorage. But the Angular expression referred to it does not load new data! I would like a classical data binding between my expression and my session storage. How can I do this?

Here there is a snippet of my html:

    <div class="container" ng-show="panels.isSelected(2)" ng-controller="DataController as pdc">
        {{pdc.myData.property_foo}}         
    </div>

and this is the controller to load data from sessionStorage

.controller('DataController', ['$window',  function($window) {

  pdc = this;

  //myData is an object
  pdc.myData = JSON.parse($window.sessionStorage.getItem("myData"));

}]);

Angular evaluates the value of myData only at the first loading of the page, instead of triggering a new evaluation of the expression each times myData changes...that's my problem...

Edit: I simulate my problem in this plnkr http://plnkr.co/edit/vG1IGOPsJlbUPOzYsY03?p=preview As you can see, when you press update the value displayed from session storage is not updated. You can see new values only by refreshing the page.

Answer 1

Expressions, which are simply in controller, are called once - when controller is loaded. So your updating wont changing myData value. What you should do is to add updating myData in your update function:

pdc.update = function ( value ) {
    $window.sessionStorage.setItem("myData", value);
    pdc.myData = value;
};

Answer 2

You can pass a function to $scope.$watch to evaluate data that is not present on $scope. For instance, sessionStorage, this, SomeService or any data source really.

So, to do what you are asking you should inject $scope into your controller, set up a $watch for the return value of a function, and update this.myData to said value.

app.controller('DataController', ['$window',  '$scope', function($window, $scope) {

  pdc = this;

  $scope.$watch(function () {
    return $window.sessionStorage.getItem('myData');
  }, function (value) {
    pdc.myData = value;
  });

  pdc.update = function ( value ) {

    $window.sessionStorage.setItem("myData", value);

  };

}]);

Alternatively, you could reverse this (makes a little bit more sense in my opinion):

$scope.$watch(function () {
  return pdc.myData;
}, function (value) {
  $window.sessionStorage.setItem('myData', value);
});

pdc.update = function (value) {
  pdc.myData = value;
};

updated plunker

Answer 3

Auth0 has a plugin to work with local and session storage and its called Angular-Storage.

It works like this:

1. First you implement this plugin in the definition of your app:

angular.module('angularStorageApp', ['angular-storage']);

2. To set an object in your storage you use this:

angular.module('angularStorageApp').controller('testCtrl', function(store) { store.set('obj', myObj); }

3. To get an object from your storage you use this:

angular.module('angularStorageApp').controller('testCtrl', function(store) { var myObjSaved = store.get('obj'); }

Downloads:

Angular-Storage for production:

Angular Storage .min

Angular-Storage for development:

Angular Storage