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!

You have to persist the value somewhere. Whether that is client-side or server-side and the method by which you persist it is up to you. — Lex
– Lex, Commented Jun 24, 2019 at 22:43

Akber Iqbal · Accepted Answer · 2019-06-25 09:12:34Z

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>

Collectives™ on Stack Overflow

Angularjs: How to keep checkbox value after reload

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related