AngularJS中使用sessionStorage实现表单输入自动保存的问题

嘿，我来帮你捋捋这个自动保存没生效的问题，结合你给出的代码片段，大概率是这几个常见原因导致的：

1. ng-change放错位置了 #

你把ng-change="autoSave()"加在了<form>标签上，但AngularJS的ng-change是专门给输入控件（比如input、select这类）设计的，表单本身不会触发ng-change事件。这就导致你的autoSave()方法根本没被调用过，自然不会有数据保存到sessionStorage里。

解决办法：把ng-change移到每个input标签上，或者用$watch监听emp对象的变化（后者更适合多字段的场景，不用每个input都加指令）。

2. 保存数据时没做序列化处理 #

sessionStorage只能存储字符串类型的数据，如果你的autoSave()方法里直接把emp对象存进去，会变成[object Object]这种无效的字符串，后续根本无法解析回原来的对象。

正确的保存方式：

$scope.autoSave = function() {
  // 把对象转成JSON字符串再存储
  sessionStorage.setItem('formEmpData', JSON.stringify($scope.emp));
};

3. 页面刷新后没恢复数据 #

就算你成功把数据存进了sessionStorage，如果没在页面初始化时把数据读出来赋值给$scope.emp，刷新后输入框还是会是空的。这一步很容易被忽略！

初始化恢复数据的代码：

angular.module('yourAppName').controller('YourController', function($scope) {
  // 页面加载时先尝试读取已保存的数据
  var savedData = sessionStorage.getItem('formEmpData');
  if (savedData) {
    // 把JSON字符串转成对象
    $scope.emp = JSON.parse(savedData);
  } else {
    // 没有保存数据时初始化空对象，避免ng-model绑定问题
    $scope.emp = { firstname: '', lastname: '', designation: '' };
  }

  // 自动保存方法
  $scope.autoSave = function() {
    sessionStorage.setItem('formEmpData', JSON.stringify($scope.emp));
  };
});

4. 可能存在AngularJS作用域绑定问题 #

如果你的控制器作用域有嵌套，或者一开始没初始化$scope.emp为一个对象，可能会触发AngularJS的“原型继承陷阱”，导致ng-model无法正确绑定到你想保存的对象上，进而保存的数据不对。所以一定要在控制器开头就初始化$scope.emp，哪怕是空对象。

给你一个完整的可运行示例参考：

HTML部分 #

<div ng-app="articleApp" ng-controller="ArticleController">
  <form name="createArticleForm">
    <input type="text" name="firstname" ng-model="emp.firstname" ng-change="autoSave()" required>
    <input type="text" name="lastname" ng-model="emp.lastname" ng-change="autoSave()" required>
    <input type="text" name="designation" ng-model="emp.designation" ng-change="autoSave()" required>
  </form>
</div>

JS部分 #

angular.module('articleApp', [])
.controller('ArticleController', function($scope) {
  // 初始化恢复数据
  var savedEmp = sessionStorage.getItem('articleEmp');
  $scope.emp = savedEmp ? JSON.parse(savedEmp) : {
    firstname: '',
    lastname: '',
    designation: ''
  };

  // 自动保存逻辑
  $scope.autoSave = function() {
    sessionStorage.setItem('articleEmp', JSON.stringify($scope.emp));
  };
});

内容的提问来源于stack exchange，提问作者dijo francis