current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 2 down vote favorite

I am new to Ionic and AngularJS. I am trying to store an array of objects to local storage. The code below works fine if I only store one object (I am able to retrieve the data). The problem arises when I try to store and access data from an array of objects (prints blank).

Here is my index.html

    <ul class="list">
      <li class="item" ng-repeat="alarm in alarms">
        {{alarm.hour}}: {{alarm.min}} {{alarm.pos}}
        <span class="item-toggle">
            <label class="toggle toggle-balanced">
                <input type="checkbox" ng-model="alarm.on" ng-click="completeTask($index)">
                <div class="track">
                   <div class="handle"></div>
                </div>
            </label>
        </span>
      </li>
    </ul>
  </ion-content>

controller.js

    $scope.createalarm = function (alarm) {
 $scope.alarms.push({
   hour : alarm.hour , min : alarm.min , pos : alarm.pos , on : true
 });
 window.localStorage['alarms'] = JSON.stringify($scope.alarms);
 $scope.setalarm.hide();
 };

  $scope.getalarms = function (){
      $scope.alarms = JSON.parse(window.localStorage['alarms'] || '[]');
  };

I validate data stored in local storage using Storage Inspector in Mozilla. This is the result:

Local Storage

Can anyone Help me?

share|improve this question
up vote 1 down vote accepted

You can use this code to store an array object to local storage:

 localStorage.setItem('alarms', JSON.stringify($scope.alarms));

to retrieve the stored values use this:

 $scope.alarms = (localStorage.getItem('alarms')!==null) ? JSON.parse(localStorage.getItem('alarms')) : [];
share|improve this answer
up vote 0 down vote

localStorage.getItem('itemName') it's what you are looking for, you need to modify your getalarms function:

$scope.getalarms = function (){
     $scope.alarms = JSON.parse(localStorage.getItem('alarms'));
};
share|improve this answer
    
It's not working same result only – ilango Feb 25 '16 at 17:12
    
you got something wrong there, because it's working for me, can you create a plnkr maybe ?? – macrog Feb 26 '16 at 6:57
    
changing just the getItem method will not fix the problem, the thing is that every new alarm that he sets will overwrite the previous one. More info in my answer – Akis Feb 27 '16 at 21:33
up vote 0 down vote

The previously set alarms must first retrieved and stored in a variable. Then push the new alarm in this variable and put them back in storage. With this way you can store an array of objects in the storage. If you dont retrieve the currently saved alarms then you will not be able to save more than one alarm in the storage because every new one will overwrite the previous

    $scope.createalarm = function (alarm) {

    //retrive all alarms that are currently in our localStorage
    //if we dont do that every new alarm will overwrite the old one
    $scope.alarms = JSON.parse(window.localStorage.getItem('alarms')) || [];
    //push the new created alarm
    $scope.alarms.push({
        hour : alarm.hour , min : alarm.min , pos : alarm.pos , on : true
    });
    //save the newly created alarm back in the storage
    window.localStorage.setItem('alarms', JSON.stringify($scope.alarms));
    $scope.setalarm.hide();


    $scope.getalarms = function (){
        $scope.alarms = JSON.parse(window.localStorage.getItem('alarms'));
    };
}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.