Как сохранить флажок установлен или снят после обновления страницы с помощью локального хранилища?

Question

Как сохранить флажок установлен или снят после обновления страницы с помощью локального хранилища в Angularjs?

Здесь я написал код:

<ul class="custom-checkbox"> 
       <li ng-repeat="type in typeoffeatures"> 
        <input type="checkbox" id="{{type.value}}" ng-checked=type.flagset ng-click="toggleSelection1(type.value)" value="{{type.value}}" required/> 
        <label for="{{type.value}}"><div class='custom-chkbox'> 
          <span>{{type.value}}</span> 
         </div></label> 
       </li> 
      </ul> 

JS код:

$scope.typeoffeatures = [{ 
      value : 'Authentication', 
      flagset : true, 
     },{ 
      value : 'Notification', 
      flagset : false, 
     },{ 
      value : 'Analytics', 
      flagset : true, 
     }]; 
    }); 

Codepen link here.

Answer 1

Я сделал несколько изменений в вашей codepen:

• добавил ng-model к флажков
• изменившихся ng-click в ng-change (более надежной)

• добавляют ng-true-value и ng-false-value представлять истинные и ложные как строки

  <input type="checkbox" id="{{type.value}}" ng-model="type.flagset" 
       ng-change="saveField(type.value, type.flagset)" 
       ng-true-value="'true'" ng-false-value="'false'" required/> 
  

https://codepen.io/anon/pen/dOeKjj?editors=1010