AngularJS - Удаление определенного элемента массива из $ window.localStorage

Question

Я пытаюсь сделать небольшое Угловое веб-приложение, где я устанавливаю элементы массива в $ window.localStorage, затем на другой странице получаю массив и показываю его.

Я сделал кнопку «удалить» для каждого элемента массива, но когда я его нажимаю, он очищает весь локальный хранилище, а не только один конкретный элемент.

HTML

<table class="table table-striped"> 
    <tr ng-repeat="product in productss track by $index"> 
     <td>{{product.name}}</td> 
     <td><button class="glyphicon glyphicon-remove-circle shoplisticons-remove" ng-click="deleteProduct(product)"></button></td> 
    </tr> 
</table> 

JS

helloApp.controller("StorageCtrl", function($scope, $window, productService) { 
    $scope.productss = productService.getData(); 
    $scope.deleteProduct = function(product) { 
     var index = $scope.productss.indexOf(product); 
     $scope.productss.splice(index, 1); 
     $window.localStorage.removeItem($window.localStorage.key(product)); 
    }; 
}); 

//Array, add and get: 
helloApp.service('productService', function($window) { 
    var KEY = 'helloApp.SelectedValue'; 

    var addData = function(newObj) { 
     var mydata = $window.localStorage.getItem(KEY); 
     if (mydata) { 
      mydata = JSON.parse(mydata); 
     } else { 
      mydata = []; 
     } 
     mydata.push(newObj); 
     $window.localStorage.setItem(KEY, JSON.stringify(mydata)); 
    }; 
    var getData = function() { 
     var mydata = $window.localStorage.getItem(KEY); 
     if (mydata) { 
      mydata = JSON.parse(mydata); 
     } 
     return mydata || []; 
    }; 
    return { 
     addData: addData, 
     getData: getData 
    }; 
}); 

Надеется, что я был достаточно специфичен.

Answer 1

В этой строке вы удаляя весь элемент.

$window.localStorage.removeItem($window.localStorage.key(product)); 

Я считаю, что вы хотите сохранить массив в локальном хранилище после удаления элемента. Дело в том, что вы должны установить массив после удаления продукта на localStorage. Вы делаете это как этот

helloApp.controller("StorageCtrl", function($scope, $window, productService) { 
$scope.productss = productService.getData(); 
$scope.deleteProduct = function (product) { 
    var index = $scope.productss.indexOf(product); 
    $scope.productss.splice(index, 1); 
    $window.localStorage.setItem('helloApp.SelectedValue',JSON.stringfy($scope.productss)); 
}; 

Или более элегантное решение, которое вы можете добавить функцию к вашим услугам, чтобы установить данные.

Answer 2

Это потому, что вы удаляете весь предмет. Не забывайте, что вы храните его в localStorage как строку, поэтому localStorage не знает, что это массив объектов.

Для удаления одного элемента, вам придется извлечь весь массив из LocalStorage, разобрать его, как JSON, сращивание элемента выключен с помощью индекса, и установить новый массив в LocalStorage