Блог

Я пытаюсь создать небольшое угловое веб-приложение, в котором я устанавливаю элементы в массиве в $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
    };
});
  

Надеюсь, я был достаточно конкретен.

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

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

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

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

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