javascript - 使用 AngularJS 防止在 Localstorage 中添加重复项

Question

我正在开发一个将产品(如收藏夹)存储到 localStorage 中的原型(prototype)，但我很难检查 localStorage 中是否已存在某个项目，因此不会再次添加。

哪里是检查重复条目并妥善处理它的最佳位置？

我的示例 Controller 如下:

function dCtrl($scope, $filter) {

    $scope.d = [
        {id:'1',d_name:'Product 1',colour:'Blue'},
        {id:'2',d_name:'Product 2',colour:'Red'},
        {id:'3',d_name:'Product 3',colour:'Cream'},
        {id:'4',d_name:'Product 4',colour:'White'},
        {id:'5',d_name:'Product 5',colour:'Green'},
        {id:'6',d_name:'Product 6',colour:'Black'},
        {id:'7',d_name:'Product 7',colour:'Purple'},
        {id:'8',d_name:'Product 8',colour:'Grey'},
        {id:'9',d_name:'Product 9',colour:'Yellow'},
        {id:'10',d_name:'Product 10',colour:'Indigo'}
    ];

  $scope.getDetails = function (id, favDresses) {

      //get the object of the item clicked
      single_object = $filter('filter')($scope.d, {id:id})[0];
      // If you want to see the result, check console.log
      console.log(single_object); 
      console.log('ID:' + id + ' - save this object to localStorage');

      //set localstorage var
      var storage = localStorage.getItem('newfavdresses');

      //check to see if the localStorage array is empty (not null)
      if(storage != null) {

        //if it isnt, parse the string
        favDresses = JSON.parse(localStorage.getItem('newfavdresses'));
        //push into the array
        favDresses.push(single_object);
        //set the item in localstorage
        localStorage.setItem("newfavdresses",JSON.stringify(favDresses));

      } else {

        //if the array is null, create it
        var favDresses = [];
        //and push the item into it
        favDresses.push(single_object);
        //set the item in local storage
        localStorage.setItem("newfavdresses",JSON.stringify(favDresses));

      }

  }

  $scope.clearStorage = function() {
    localStorage.clear();
    alert('Local Storage Cleared');
  }

//get localStorage items  
var dresses = localStorage.getItem("newfavdresses");
dresses = JSON.parse(dresses);
console.log(dresses);

}

jsFiddle 演示 - https://jsfiddle.net/dwhiteside86/Lt7aP/2261/

Answer 1

我的建议是使用存储在服务中的实时 JavaScript 数组。

当服务初始化时，您可以从 localStorage 加载此数组，如果存储中没有任何内容，则设置为空数组。

然后，每当您更新存储的数组时，您总是将整个数组存储回 localStorage，以便存储的版本始终是实时版本的字符串副本。

这样，您只需使用 getItem() 一次，然后就可以在每次修改数组或数组中的对象时调用一个简单的服务方法 storeLocal()。

您可能会看到的另一件事是 ngStorage这将为您完成以上所有操作