javascript - 如何在页面刷新后保存动态复选框状态？

Question

即使在刷新页面后，我仍试图保存复选框的状态。我可以获得每个动态复选框的索引，因此我知道选中了哪个复选框，但是即使在页面刷新后我也无法让复选框保持不变。我尝试使用 localStorage 在本地保存，即使它存储了值，它也不会保持复选框状态相同:

动态复选框 HTML:

<input type="checkbox" ng-model="checkbox[$index]" ng-change="alert($index)">

获取动态复选框索引:

$scope.checkbox = []; //checkbox index
$scope.alert = function(index, event){
  localStorage['checkbox'] = $scope.checkbox[index];
  alert("checkbox " + index + " is " + $scope.checkbox[index]);

}

//检查变化和更新

localStorage.getItem("checkbox") ? 
JSON.parse(localStorage.getItem("checkbox")) : false;

$scope.$watch(localStorage['checkbox'], function (newVal, oldVal) {
  if (oldVal !== newVal) {
    localStorage['checkbox'] = newVal;
  }
});

Answer 1

试试这个片段，如果有信息需要从本地存储的内容循环并分配给每个复选框。

示例 HTML

<p ng-repeat="check in checkBoxes track by $index">
  <label>{{$index}}</label>
  <input type="checkbox" ng-model="checkBoxes[$index]" ng-change="valueChange()"/>
</p>

<pre>{{checkBoxes}}</pre>    

Controller 示例

$scope.checkBoxes = [false, false, false, false];

if(localStorage['checkBoxes']){
  $scope.checkBoxes = JSON.parse(localStorage.getItem("checkBoxes"));
  console.log(localStorage['checkBoxes'].length);
}

$scope.valueChange =function(){
  localStorage.setItem("checkBoxes", JSON.stringify($scope.checkBoxes));
};

Sample Plnkr