如何在Angular JS中返回上一页时保留表单已填数据？

嘿，这个需求在AngularJS开发里挺常见的，我给你分享两种最实用的实现方案，都是项目里验证过的：

方案一：用AngularJS单例服务共享数据 #

AngularJS的服务是单例模式的，也就是说整个应用里只有一个实例，非常适合用来在不同页面（控制器）之间共享数据。步骤很简单：

1. 先创建一个专门存储表单数据的服务
2. 在表单页面的控制器里，把表单数据和服务的数据做绑定
3. 跳转到下一页前，确保数据已经同步到服务里；返回时，控制器从服务里读取数据自动填充表单

代码示例： #

// 第一步：定义共享数据的服务
angular.module('yourAppName').service('FormDataStore', function() {
  // 初始化表单结构，和你的表单字段对应
  this.savedData = {
    Name: '',
    Id: '',
    Address: '',
    MobileNo: ''
  };
});

// 第二步：表单页面的控制器
angular.module('yourAppName').controller('FormController', function($scope, $location, FormDataStore) {
  // 把表单数据和服务的数据双向绑定——用户输入时会实时同步到服务
  $scope.formData = FormDataStore.savedData;

  // 提交表单跳转到下一页的方法
  $scope.submitForm = function() {
    // 先做表单验证，没问题再跳转
    if ($scope.yourFormName.$valid) {
      $location.path('/your-next-page');
    }
  };
});

这种方案的优点是：数据存在内存里，读写速度快；不需要处理序列化/反序列化。缺点是：如果用户刷新页面，数据会丢失——适合临时保存未提交的表单数据。

方案二：用localStorage持久化保存数据 #

如果希望用户刷新页面、甚至关闭浏览器再打开，表单数据依然保留，那用localStorage就最合适了。它会把数据存在用户浏览器的本地存储里，持久化保存。

代码示例： #

angular.module('yourAppName').controller('FormController', function($scope, $location) {
  // 初始化时，从localStorage读取之前保存的数据
  var savedData = localStorage.getItem('userFormData');
  if (savedData) {
    // 把JSON字符串转成对象
    $scope.formData = JSON.parse(savedData);
  } else {
    // 没有保存过数据的话，初始化空表单
    $scope.formData = {
      Name: '',
      Id: '',
      Address: '',
      MobileNo: ''
    };
  }

  // 提交表单时保存数据到localStorage
  $scope.submitForm = function() {
    if ($scope.yourFormName.$valid) {
      // 把对象转成JSON字符串存入localStorage
      localStorage.setItem('userFormData', JSON.stringify($scope.formData));
      $location.path('/your-next-page');
    }
  };

  // 可选：监听页面离开事件，自动保存表单（比如用户还没提交就返回的情况）
  $scope.$on('$locationChangeStart', function() {
    // 只有表单有修改时才保存
    if ($scope.yourFormName.$dirty) {
      localStorage.setItem('userFormData', JSON.stringify($scope.formData));
    }
  });
});

这种方案的优点是：数据持久化，不受页面刷新、浏览器重启影响。缺点是：存储的数据是字符串格式，需要手动处理JSON序列化/反序列化；存储大小有限制（一般5MB左右）。

小提示 #

• 如果只是临时保留数据（比如用户只是在页面间跳转，不会刷新），优先选方案一，代码更简洁。
• 如果需要数据长期保留，或者担心用户误刷新，选方案二更稳妥。
• 别忘了给表单加上name属性（比如name="yourFormName"），这样才能用$scope.yourFormName.$valid做验证，以及$dirty判断表单是否修改。

内容的提问来源于stack exchange，提问作者Priyanka Taneja