retain data in forms when going to another form and coming back again

Question

I have a form and there i have included some text boxes and select boxes. I'm using ionic framework and angularjs. When completing this form and on submit goes to another page to enter a password. So i want to move back to the previous form i can always press back and come. But the problem is the data i entered is gone.i have to complete the form all over again. Is there a way to fix this? Thanks.

On submit using below line i move into the password form

$state.go('app.transpass');

Answer 1

In your JS :

    app.service("YourService", function() {

        this.userName = "";

        this.password = "";

    });

    app.controller("YourController", function($scope, YourService) {

        $scope.YourService = YourService;

    });

in your HTML :

    <input type="text" ng-model="YourService.userName" />
    <input type="password" ng-model="YourService.password" />

Now trying switching the pages, using routes, and then come back to this page. You'll have your data as it is in the text boxes.

For More details about angularjs services, you may refer to this link.

Answer 2

I don't use AngularJS, so I will approach with Javascript and jQuery. If Angular Service can give a solution for you, then go for it.

ref. Clear all fields in a form upon going back with browser back button

Modern browsers implement something known as back-forward cache (BFCache). When you hit back/forward button the actual page is not reloaded (and the scripts are never re-run).

If you have to do something in case of user hitting back/forward keys -- listen for BFCache pageshow and pagehide events.

A pseudo jQuery example:

  $(window).bind("pageshow", function() {
    // update hidden input field
  });

See more details for Gecko and WebKit implementations.

With BFCache and sessionStorage, you can do

on the form page,

  var input01 = $("#idName").val();
  sessionStorage.input01 = input01;

when you are back at it,

$(window).bind("pageshow", function(){
  $("#idNAme").val(sessionSotrage.input01);
});