AngularJS - 从$ window.localStorage中删除特定的数组项

时间:2016-10-12 09:32:43

标签: javascript angularjs arrays local-storage

我正在尝试制作一个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
    };
});

希望我足够具体。

2 个答案:

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

或者,对于更优雅的解决方案,您可以向服务添加功能以设置数据。