在转到另一个表单并再次返回时，以表单形式保留数据

Question

我有一个表单，并且其中包含一些文本框和选择框。 我正在使用离子框架和angularjs。 填写此表格并提交时，请转到另一页输入密码。 所以我想回到以前的表格，我可以随时退回来。 但是问题是我输入的数据不见了。我必须重新填写表格。 有没有办法解决这个问题？ 谢谢。

在使用下面的行提交时，我进入密码表格

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

Answer 1

在您的JS中：

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

        this.userName = "";

        this.password = "";

    });

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

        $scope.YourService = YourService;

    });

在您的HTML中：

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

现在尝试使用路由切换页面，然后返回此页面。 您将在文本框中保留数据。

有关angularjs服务的更多详细信息，您可以参考此链接。

Answer 2

我不使用AngularJS，因此我将使用Javascript和jQuery。 如果Angular Service可以为您提供解决方案，那就去解决。

REF。 使用浏览器后退按钮返回时清除表单中的所有字段

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.

使用BFCache和sessionStorage，您可以执行

在表单页面上

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

当你回到它，

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