从angularjs中的localstorage中检索对象数组答案

【问题标题】：Retrieving an array of objects from localstorage in angularjs从angularjs中的localstorage中检索对象数组
【发布时间】：2016-04-04 20:05:35
【问题描述】：

我是 Ionic 和 AngularJS 的新手。我正在尝试将一组对象存储到本地存储中。如果我只存储一个对象（我能够检索数据），下面的代码可以正常工作。当我尝试存储和访问对象数组中的数据时出现问题（打印空白）。

这是我的 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'] || '[]');
  };

我使用 Mozilla 中的 Storage Inspector 验证存储在本地存储中的数据。结果如下：

谁能帮帮我？

【问题讨论】：

标签： javascript angularjs html ionic-framework local-storage

【解决方案1】：

您可以使用此代码将数组对象存储到本地存储：

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

要检索存储的值，请使用：

 $scope.alarms = (localStorage.getItem('alarms')!==null) ? JSON.parse(localStorage.getItem('alarms')) : [];

【讨论】：

【解决方案2】：

localStorage.getItem('itemName') 就是你要找的，你需要修改你的getalarms函数：

$scope.getalarms = function (){
     $scope.alarms = JSON.parse(localStorage.getItem('alarms'));
};

【讨论】：

你那里出了点问题，因为它对我有用，你能创建一个 plnkr 吗？？
只改变 getItem 方法并不能解决问题，问题是他设置的每个新警报都会覆盖以前的警报。我的答案中有更多信息

【解决方案3】：

必须首先检索先前设置的警报并将其存储在变量中。然后将新警报推送到此变量中并将它们放回存储中。通过这种方式，您可以在存储中存储对象数组。如果您不检索当前保存的警报，那么您将无法在存储中保存多个警报，因为每个新警报都会覆盖以前的警报

    $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'));
    };
}

【讨论】：