從本地存儲器逐一檢索數組列表

我正在創建一個示例待辦事項應用程序，我可以在其中添加/刪除任務，但是當我刷新頁面時，數據會丟失。所以我決定使用localStorage保存任務列表，並在頁面刷新時檢索它。從本地存儲器逐一檢索數組列表

我能夠做到這一點，但我可以檢索數據僅作爲數組列表。我如何列出存儲在我的localStorage中的任務，並將其顯示爲與頁面加載之前的樣子完全相同？

HTML代碼

<body ng-app="todoApp"> 
    <div ng-controller="addTaskController" data-ng-init="init()"> 
     <div class="container"> 
      <h3>ToDo Application</h3> 
      <div class="form-group col-md-6"> 
       <form ng-submit="addTask()" class="form-inline"> 
        <input type="text" placeholder="Enter Your Task" ng-model="newTask" class="form-control"> 
        <button type="submit" class="btn btn-primary">Add Task</button> 
        <div class="taskList"> 
         <ol> 
          <li ng-repeat="task in tasks track by $index">{{task}} <i style="color:red;margin-left:10px;cursor:pointer;" class="fa fa-times" aria-hidden="true" ng-click="deleteTask()" data-toggle="tooltip" title="Delete Task"></i></li> 
          <p ng-show="tasks.length==0">No Tasks Available </p> 
         </ol> 
        </div> 
       </form> 
      </div> 
    </body>

JS代碼

var todoApp = angular.module('todoApp',[]); 
    todoApp.controller('addTaskController',function($scope){ 
     $scope.tasks = []; 
     $scope.addTask = function() { // Function to add a task to list 
      if($scope.newTask == null) { 
       alert("Please enter a task"); 
      } else { 
       $scope.tasks.push($scope.newTask); 
       localStorage.setItem("storedTasks", JSON.stringify($scope.tasks)); 
       $scope.newTask = null; 
      }; // add() ends 
     } 
     $scope.deleteTask = function() { 
      $scope.tasks.splice(this.$index, 1); 
      localStorage.removeItem("storedTasks"); 
     }; 
     $scope.init = function() { 
      $scope.retrievedData = localStorage.getItem("storedTasks"); 
      if($scope.retrievedData != null) { 
       $scope.tasks.push($scope.retrievedData); 
      } else { 
       tasks.length==0; 
      } 
     } 
    });

之前重新加載頁面

後重新加載頁面

我怎樣才能解決這個

來源

2016-04-25 Shareer

也可以使用其他方式：'$ scope.tasks = angular.fromJson（localStorage.getItem（「storedTasks」））;' – devqon

RetrievedData是你必須遍歷所有物品推到tasks對象的數組。你現在正在做的是將整個陣列轉儲到單個任務中。

if($scope.retrievedData != null){ 
    $scope.retrievedData.forEach(function(item){ 
     $scope.tasks.push(item); 
    }) 
}

來源

2016-04-25 11:45:26 Ozrix

既然你只能存儲在local storagestring，您通過JSON.stringify()一樣，你需要通過JSON.parse(text[, reviver])撤消，然後遍歷它。

來源

2016-04-25 11:47:56 Fonzy

從本地存儲器逐一檢索數組列表

回答

相關問題