我正在尝试制作一个Angular网络应用程序,我将数组中的项目设置为$ window.localStorage,然后在另一个页面上我获取数组并显示它。
我为每个数组项创建了一个“删除”按钮,但是当我按下它时,它会清除整个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
};
});
希望我足够具体。
答案 0 :(得分:0)
那是因为你要删除整个项目。不要忘记你将它作为字符串存储在localStorage中,因此localStorage不知道它是一个对象数组。
要删除一个项目,您必须从localStorage获取整个数组,将其解析为JSON,使用索引关闭项目,并在localStorage中设置新数组
答案 1 :(得分:0)
在此行中,您将删除整个项目。
$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));
};
或者,对于更优雅的解决方案,您可以向服务添加功能以设置数据。