Abrufen der Array-Liste einzeln aus dem lokalen Speicher

Ich erstelle eine Beispiel-Aufgabenanwendung, in der ich Aufgaben hinzufügen/entfernen kann, aber beim Aktualisieren der Seite gehen Daten verloren. Also entschied ich mich, localStorage zu verwenden, um die Aufgabenlisten zu speichern und sie beim Aktualisieren der Seite abzurufen.Abrufen der Array-Liste einzeln aus dem lokalen Speicher

Ich bin in der Lage, das gleiche zu tun, aber ich kann die Daten nur als Array-Liste abrufen. Wie kann ich Aufgaben nacheinander in meinem localStorage auflisten und es genau wie vor dem Laden der Seite anzeigen?

HTML CODE

<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 CODE

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

Vor Seite neu laden

Nach Seite neu laden

Wie ich das

beheben

Quelle

2016-04-25 Shareer

Verwenden Sie auch umgekehrt: '$ scope.tasks = angular.fromJson (localStorage.getItem (" storedTasks "));' – devqon

RetrievedData ein Array Sie immer und drücken jedes Element zum tasks Objekt iterieren müssen. Was Sie jetzt tun, ist das gesamte Array in einer einzigen Aufgabe zu entleeren.

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

Quelle

2016-04-25 11:45:26 Ozrix

Da Sie string in local storage nur speichern können, die Sie über JSON.stringify() haben, müssen Sie es über JSON.parse(text[, reviver]) rückgängig zu machen und dann über sie iterieren.

Quelle

2016-04-25 11:47:56 Fonzy

Abrufen der Array-Liste einzeln aus dem lokalen Speicher

Antwort

Verwandte Themen