Angularjs - Retain the entered form data during redirection for the user to continue when coming back to that form

Question

I am creating a simple user data collection project which requires the user to enter data in multiple forms.

I have created separate html page for each form.

There are forms for the user to enter personal details, educational details and a few more.

When a user enters personal details and clicks next I store the data in localstorage and in the end all the data are sent to db.

When the user clicks next and again comes to the same page i retrieve the data from localstorage and bind it in the respective text boxes. But when the user does not click next and goes to another page by using the nav bar options the entered data is lost.

But I want the to data to be there even if the user does not click next and go to another page and come back to that page so that he can continue to fill the form where he left.

I am doing this project in Angularjs.

I have got no clue on how to do this, someone pls put me on the right track.

angular.module('userDetails').factory('sessionService', [function () {
return{
    getGlobal: function(key){
        var data = localStorage.getItem("user."+ key);
        if(data){
            return JSON.parse(data).data;
        }
        return null;
    },
    get : function(key){
        var data = localStorage.getItem("user."+ key);
        if(data){
            return JSON.parse(data).data;
        }
        return null;
    },
    set: function(key, value){
        localStorage.setItem("user."+key, JSON.stringify({data: value}));
    }
};

}]);

In my html

<button ng-click=savePD(PD)> Next </button>

When the next button is clicked in personal details form:

$scope.savePD = function(PD){
    sessionService.set("personalData",PD);
    $location.path('/educationData');
}

So when the next button is clicked the model values are passed to the function and then stored in local.

So I need to know when I don't click next and go to another page how do i retain the currently entered value in the first form.

Answer 1

you can use $rootscope if you do not want your data to be lost in the page navigation.

The data in rootscope can be accessed through any controller, just inject the rootscope in the controller .

Root scope should be initialized in the app.run function.

angular.module('myApp', [])
.run(function($rootScope) {
    $rootScope.form_data = {}
})
.controller('myCtrl', function($scope, $rootScope) {

})
.controller('myCtrl2', function($scope, $rootScope) {

});

form_data is available in every form in any controller as a hash.

Form 1,

<div ng-controller="myCtrl">
  <form>
    First Name:<br>
    <input type="text" ng-model="form_data.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="form_data.lastName">
    <br><br>
    <button ng-click="next()">Next</button>
  </form>
</div>

Form 2,

<div ng-controller="myCtrl2">
  <form>
    Profile:<br>
    <input type="text" ng-model="form_data.profile"><br>
    Age:<br>
    <input type="number" ng-model="form_data.age">
    <br><br>
    <button ng-click="next()">Next</button>
  </form>
</div>

Now you can retrieve the values from the rootscope from the last controller and send it to db.

.controller('myCtrl3', function($scope, $rootScope) {
  var data = $rootScope.form_data

  // call http using a service or here itself and send data as a parameter
});