如何在頁面刷新後保存動態複選框狀態？

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

試試這個片段，如果有info和asign到每個複選框，需要從localstorage的內容循環。

樣本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>  

樣品控制器上

$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