在转到另一个表单并再次返回时保留表单中的数据答案

【问题标题】：retain data in forms when going to another form and coming back again在转到另一个表单并再次返回时保留表单中的数据
【发布时间】：2015-03-27 03:16:37
【问题描述】：

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

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

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

【问题讨论】：

您是否使用令牌系统来保证安全？具体来说，表单是否会在每次访问表单时生成令牌值？
好的。那么即使在浏览器关闭后你还需要记住输入吗？你的后端语言是什么？我会告诉你解决这个用例的最佳方法。
不是在浏览器关闭时。但是当我转到密码表单时，如果我决定回到以前的表单（不提交密码表单），我应该能够编辑表单。但是现在当我回到表单时没有数据。
使用 Angular 服务，而不是数据绑定的范围变量。 Angular Services 保存数据，直到托管您的应用程序的选项卡被终止 [关闭]。
@TechMa9iac 你能给我一个类似我的问题的例子吗？

标签： javascript angularjs forms ionic-framework

【解决方案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服务的详情，可以参考this link.

【讨论】：

我有一个控制器用于我的第一个表单和第二个表单，即密码表单。我应该在哪个控制器中使用您的代码？
你可以在他们两个中使用它..不会对持久性产生任何影响
我的模型是 ng-model="data.password" 我已经用这种方式完成了所有工作。如何解决我的问题？
请分享一个plunker，以便重构为基于服务的解决方案

【解决方案2】：

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

参考。 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.

使用 BFCache 和 sessionStorage，你可以做到

在表单页面上，

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

当你回来的时候，

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

【讨论】：