Angularjs: How to keep checkbox value after reload

Question

I got the following code from W3Schools, but am wondering how to get the checkbox value to persist even after page reload:

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>

Right now, if you check the box and reload the page, the checkbox becomes unchecked again.

How would you get the checkbox to retain its value even after reload? Thanks!

Answer 1

localStorage would store your information even if you restart the browser... i think this will be more suited... the following code would work for you in your local environment

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>