ローカルストレージに格納されている配列要素を削除する方法

Question

私の簡単なTODOアプリケーションでは、私は自分のローカルストレージに配列リストを保存しています。基本的にはタスクリストです。私はローカルストレージから同じタスクを削除したいと思うタスクを削除しながら。

JSコード

$scope.addTask = function(){ 
     localStorage.setItem("storedTasks", JSON.stringify($scope.tasks)); 
    }; //function to add task 

    $scope.deleteTask = function(){ 
    $scope.tasks.splice(this.$index, 1);  
    localStorage.removeItem("storedTasks"); 
    }; // Function to delete a task from list 

HTML

  <div class="taskList"> 
       <ol> 
        <li ng-repeat="task in tasks track by $index"> {{task}} 
        <i class="fa fa-trash-o" aria-hidden="true" ng-click="deleteTask()" data-toggle="tooltip" title="Delete Task"></i> 
        <i class="fa fa-pencil-square-o" aria-hidden="true" ng-click="editTask()"></i> 
        </li> 
        <p ng-show="tasks.length==0">No Tasks Available </p> 
       </ol> 
      </div> 

私はlocalStorage.removeItemを（使用）それはむしろ私が削除したいタスクよりも配列全体をクリアします。削除するタスクだけを削除するには

Answer 1

アイテムを取得し、インデックス値を削除してアイテムを再度設定する必要があります。

 $scope.deleteTask = function(){ 
     $scope.newTasks = localStorage.getItem("storedTasks"); 
     $scope.newTasks.splice(this.$index, 1);  
     localStorage.setItem("storedTasks",JSON.stringify($scope.newTasks)); 
     }; 

Answer 2

splice機能を使用して、localstorageからそのインデックスで同じタスクを削除します。

$scope.deleteTask = function(){    
    $scope.tasks.splice(this.$index, 1);  
    $localStorage.storedTasks.splice(this.$index, 1); 
};