AngularJS - Entfernen eines bestimmten Array-Elements aus $ window.localStorage

Question

Ich versuche, eine kleine Angular Web-App zu machen, wo ich Elemente auf Array auf $ window.localStorage setzen, dann auf einer anderen Seite bekomme ich das Array und zeige es an.

Ich habe eine Schaltfläche "Löschen" für jedes Array Element, aber wenn ich es drücke, löscht es die ganze localStorage, nicht nur ein bestimmtes Element.

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

Hoffnung war ich genug spezifisch.

Answer 1

Sie in dieser Zeile sind Löschen des gesamten Artikels

Ich glaube, dass Sie das Array in den lokalen Speicher nach dem Löschen des Elements speichern möchten. Der Punkt ist, sollten Sie das Array nach dem Löschen des Produkts auf die localStorage setzen. Sie tun es, wie diese

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

Oder elegantere Lösung Sie eine Funktion, um Ihre Dienste hinzufügen können, um die Daten zu setzen.

Answer 2

Das liegt daran, dass Sie den gesamten Artikel entfernen. Vergessen Sie nicht, dass Sie es in localStorage als String speichern, damit localStorage nicht weiß, dass es sich um ein Array von Objekten handelt.

ein Element zu löschen, müssen Sie das gesamte Array von localstorage holen müssen, analysieren sie als JSON, splice das Element über den Index, und legen Sie das neue Array in localstorage