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

如何删除存储在本地存储中的数组元素

2 个答案: