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

我想做一个小的Angular web应用程序，我把数组上的项目设置为$window。localStorage，然后在另一个页面上获取数组并显示它。

我已经为每个数组项做了一个"删除"按钮，但是当我按下它时，它会清除整个localStorage，而不仅仅是一个特定的项。

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

希望我说得够详细