AngularJs localStorage在循环中删除元素

Question

我不知道如何在 localStorage 循环中删除元素 在保存方法中，我添加元素并检查它是否重复 请解释我如何删除元素，例如仅使用 id 或所有值

我的工厂

.factory('SaveDocuments', function() {
        var documents = [];

            save: function (id, name, link) {
                if(documents.filter(function(a){return a.id==id}).length)
                { alert('conflict!'); }
                else {
                // add to it,
                documents.push({id: id, name: name, link: link});
                // then put it back.
                localStorage.setItem('document', JSON.stringify(documents));
                }

            },

            del: function(id, name, link) {
                if(documents.filter(function(a){return a.id==id}).length) {
                    for (i = 0; i < localStorage.length; i++){
                    key = localStorage.key(i);
                    value = localStorage.getItem(key);
                        localStorage.removeItem(value);
                    console.log(value);
                    break;
                }
                }
                else {
                    alert('conflict!');
                }
            }

        }

我的控制器

 .controller('PageSearchCtrl', function($scope, ConstSearch, SaveDocuments) {                          
     $scope.saveDocument = function() {                                                                
         //Create new project                                                                          
             $scope.document = [{"id": 1, "name": "new1", "link": "#/const"}];              
             SaveDocuments.save($scope.document[0].id,$scope.document[0].name,$scope.document[0].link);
     };                                                                                                
      $scope.deleteDocument = function () {                                                            
          $scope.document = [{"id": 1, "name": "new1", "link": "#/const"}];                 
          //Create new project                                                                         


SaveDocuments.del($scope.document[0].id,$scope.document[0].name,$scope.document[0].link);    
  }             

Answer 1

我建议您将服务更改为以下内容：

.factory('SaveDocuments', function () {
    var lsKey = 'document', // the key to store the docs in local storage under
        documents = JSON.parse(localStorage.getItem(lsKey) || '[]'); // initialise from localStorage

    function saveToLocalStorage() {
        localStorage.setItem(lsKey, JSON.stringify(documents));
    }

    return {
        save: function (id, name, link) {
            if (documents.filter(function (a) {
                return a.id == id;
            }).length) {
                alert('conflict!');
            } else {
                // add to it,
                documents.push({
                    id: id,
                    name: name,
                    link: link
                });
                saveToLocalStorage();
            }

        },

        del: function (id, name, link) {
            // clear all if del() is called with no arguments or null for all args
            if (!id && !name && !link) {
                documents = [];
                saveToLocalStorage();
                return;
            }
            var initialLength = documents.length;
            documents = documents.filter(function (doc) {
                return (!id || doc.id !== id) && (!name || doc.name !== name) && (!link || doc.link !== link);
            });
            // if nothing was removed, show error
            if (documents.length === initialLength) {
                alert('conflict!');
            } else {
                saveToLocalStorage();
            }
        }
    };
});

请注意，我在应用程序启动时从本地存储状态正确初始化了它（因此当您重新加载页面时数据正确存在），使用变量来保存您用于将数据存储在本地存储中的唯一键（保持代码干燥），并修复了您的 del() 方法，以便保留不符合删除条件的方法，或者如果没有传入参数则删除所有内容，然后用更新的状态覆盖本地存储中的值。

注意：你应该测试一下，我没有做任何测试看看这是否有效。