使用Angular js保持页面刷新上复选框的先前状态答案

【问题标题】：Maintain the previous state of checkbox on the page refres using angular js使用Angular js保持页面刷新上复选框的先前状态
【发布时间】：2016-03-09 03:31:01
【问题描述】：

我有一个复选框，当复选框被选中时，显示一个 div，在取消选中状态下，div 被隐藏，效果很好，但是当我选中复选框并刷新页面时它变成未选中状态，我怎么能保持页面刷新时复选框的状态，抱歉英语不好，提前谢谢。

角度代码：

myApp.controller("expressionController", function ($scope) {
// Show or Hide Div

$scope.showHideDiv = function () {
if ($scope.chkStatus) {
$scope.showhideprop = true;
}
else {
$scope.showhideprop = false;
}
}
});

HTML代码：

<form id="form1">
<div data-ng-app="sampleapp" data-ng-controller="expressionController">
Show or Hide Div: <input type="checkbox" name="tarn" ng-model="chkStatus" ng-change="showHideDiv()" /> <br /><br />
<div style="padding:10px; border:1px solid black; width:30%; font-weight:bold" ng-show='showhideprop'>Hi Welcome to Angularjs... Hello World</div>
</div>
</form>

【问题讨论】：

如果你想要一个在加载页面中被选中的复选框，你可以添加checked到复选框。如果你想拥有最新的复选框状态，你可以使用Cookies或会话。

标签： javascript jquery angularjs checkbox

【解决方案1】：

您可以为此使用 localStorage：

$scope.showhideprop = localStorage.getItem('showhideprop') || false;

现在在函数中调用ngChange时将当前值设置为localStorage：

$scope.showHideDiv = function () {
   if ($scope.chkStatus) {
     $scope.showhideprop = true;
   } else {
     $scope.showhideprop = false;
   }
   localStorage.setItem('showhideprop', $scope.showhideprop);
}

【讨论】：

【解决方案2】：

您可以监控page before unload event并将其添加到本地存储

【讨论】：