Angular - Storing and Reading checkbox list with states in the localStorage

Question

I'm trying to store a checkbox list with each checkboxes values in the localStorage but I'm always getting a dupes error within ng-repeat or a Unexpected token o in JSON at position 1, should I use JSON.parse on the object.

Basically this is an options list that I later want to load but I also want to load the states when I access the menu, should they exist in the localStorage.

controller.js

 var initialAlarmColumns = [{
                    columnName: "Alarm",
                    value: true
                }, {
                    columnName: "Description",
                    value: true
                }, {
                    columnName: "Acknowledged by",
                    value: false
                }];

                if(localStorage.getItem('alarmColumns') === null){
                    localStorage.setItem('alarmColumns', JSON.stringify(initialAlarmColumns));
                    self.alarmColumns = initialAlarmColumns;
                }
                else{
                    self.alarmColumns = JSON.parse(localStorage.getItem('alarmColumns'));
                }

                self.setAlarmColumns = function(columnsChecked){
                    localStorage.setItem('alarmColumns', JSON.stringify(columnsChecked));
                };

optionsView.html

<ul class="alarmColumnOptions" ng-repeat="alarmOptions in $ctrl.alarmColumns">
    <li><label><input type="checkbox" name="alarmOptions.columnName" ng-model="alarmOptions.value" ng-change="$ctrl.setAlarmColumns($ctrl.alarmColumns)"> {{alarmOptions.columnName}}</label></li>
</ul>

I'm using simple localStorage and not the directive, due to another unrelated issue in my app.

EDIT: here is the code preview in plunkr

Can you write a small code chunk where your problem is reproduced and post it as a JSFiddle? — Lajos Arpad, Jul 26 '16 at 17:21

score 1 · Accepted Answer · answered Jul 27 '16 at 09:59

Found out the issue. I was missing track by $index in the ng-repeat.

    <h3>Alarm Columns</h3>
    <ul class="alarmColumnOptions" ng-repeat="alarmOptions in alarmColumns track by $index">
        <li><label><input type="checkbox" name="alarmOptions.columnName" ng-model="alarmOptions.value" ng-change="setAlarmColumns(alarmColumns)"> {{alarmOptions.columnName}}</label></li>
    </ul>

js changes:

var initialAlarmColumns = [{
                columnName: "Alarm",
                value: true
            }, {
                columnName: "Description",
                value: true
            }, {
                columnName: "Acknowledged by",
                value: false
            }];

        if (localStorage.getItem('alarmColumns') === null) {
            localStorage.setItem('alarmColumns', JSON.stringify(initialAlarmColumns));
        }

        $scope.alarmColumns = JSON.parse(localStorage.getItem('alarmColumns'));

        $scope.setAlarmColumns = function(columnsChecked) {
            localStorage.setItem('alarmColumns', JSON.stringify(columnsChecked));
        };

Angular - Storing and Reading checkbox list with states in the localStorage

1 Answers1