Question

我经历了一些链接，但那并没有帮助我。我必须限制json数组中的重复标题。这是怎么做的？

function submitForm(){
  var titleInput=document.getElementById('titleName').value;
  var messageInput=document.getElementById('titleDesc').value;  
  var oldItems = JSON.parse(localStorage.getItem('itemsArray')) || [];
  var newItem = {
                    "title":titleInput ,
                    "desc": messageInput
                };

  if(!(titleInput=="" || messageInput=="")){
    oldItems.push(newItem); 
  }
}

Answer 1

试试这个：

if (!(titleInput == "" || messageInput == "")) {
       var repeated = false;
       for (var i = 0; i < oldItems.length; i++) {
           if (oldItems[i].titleInput == titleInput) {
               repeated = true;
               break;
           }
       }
       if (repeated == false) {
           oldItems.push(newItem);
       }
   }

Answer 2

在添加项目之前，您只需检查该项目是否存在。

var alreadyExists = oldItems.some(function (item) { return item.title == titleInput; }); 

if(!(titleInput=="" || messageInput=="") && !alreadyExists) {
    oldItems.push(newItem); 
}

那么也许您应该通过将该逻辑封装在ItemStore或类似的东西中来使概念更明确。

function ItemStore(items) {
    this._items = [];
    this._titleMap = {};

    this.addAll(items || []);
}

ItemStore.prototype = {
    constructor: ItemStore,

    hasItemTitled: function (title) {
        return !!this._titleMap[title];
    },

    add: function (item) {
        var title = item.title;

        if (this.hasItemTitled(title)) throw new Error("the store already contains an item titled '" + title + "'");
        this._titleMap[title] = true;
        this._items.push(item);
    },

    addAll: function (items) {
        items.forEach(this.add.bind(this));
    },

    items: function () { return this._items.slice(); }

    //other useful methods such as itemAt, remove...
};

然后你的代码变得像......一样简单。

  var titleInput=document.getElementById('titleName').value;
  var messageInput=document.getElementById('titleDesc').value;  
  var oldItems = new ItemStore(JSON.parse(localStorage.getItem('itemsArray')) || []);
  var newItem = {
      "title":titleInput ,
      "desc": messageInput
  };
  var shouldAddItem = titleInput != "" && messageInput !="" && !oldItems.hasItemTitled(newItem.title);

  if (shouldAddItem) oldItems.add(newItem);

现在显然，你的功能仍然做得太多了，因为它：

知道如何从用户的输入中检索和创建新项目
知道如何为商品商店补充水分
知道要检查什么以验证某个项目是否有效且是否应该添加

您应该阅读Single Responsability Principle，这不仅适用于OO。

使用Javascript限制json localstorage中的重复条目

2 个答案: