Angularjs: как сохранить значение флажка после перезагрузки - PullRequest
Новая
       25

Angularjs: как сохранить значение флажка после перезагрузки

1 голос
/ 25 июня 2019

Я получил следующий код от W3Schools, но мне интересно, как сохранить значение флажка даже после перезагрузки страницы: 

Keep HTML: <input type="checkbox" ng-model="myVar">

<div ng-if="myVar">
<h1>Welcome</h1>
<p>Welcome to my home.</p>
<hr>
</div>

<p>The DIV element will be removed when the checkbox is not checked.</p>
<p>The DIV element will return, if you check the checkbox.</p>

Прямо сейчас, если вы установите флажок и перезагрузите страницу,флажок снова становится непроверенным.

Как бы вы получили флажок, чтобы сохранить его значение даже после перезагрузки?Спасибо!

1 Ответ

1 голос
/ 25 июня 2019

localStorage будет хранить вашу информацию, даже если вы перезапустите браузер ... я думаю, что это будет более подходящим ... следующий код будет работать для вас в вашей локальной среде 

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  let existingStoredValue = localStorage.getItem("checkBox Value");
  if (existingStoredValue == 'true') {
    $scope.myVar = true;
  }

  $scope.storeCB = function(passedVal) {
    localStorage.setItem("checkBox Value", passedVal);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  Keep HTML: <input id='keepHTML' type="checkbox" ng-model="myVar" ng-click="storeCB(myVar)">

  <div ng-if="myVar">
    <h1>Welcome</h1>
    <p>Welcome to my home.</p>
    <hr>
  </div>

  <p>The DIV element will be removed when the checkbox is not checked.</p>
  <p>The DIV element will return, if you check the checkbox.</p>
</div>
...