如何防止在本地存储中存储重复值？

Question

我不知道如何解释这一点，但基本上我希望用户在尝试保存已经在本地存储中的数据时收到警报，即用户单击保存按钮将数据保存到收藏夹（本地存储）。但是当他们第二次尝试时应该这样说“这已经被保存了，除非你从存储中删除数据，否则你不能再次保存”我可以让它在用户单击按钮保存后显示存储中的内容数据。我正在尝试在 html 中执行此操作，并使用具有存储数据的外部 json 文件，然后将其保存到浏览器的本地存储中。应该只允许用户保存属性 html 页面的数据，例如只保存一次。我尝试切换我的 if 和 else 条件，但我无法让它工作。

Javascript 代码

$(".save").on("click", function() {
console.log("Saving property id to local storage");
try {
    $(this).attr('disabled', true);

    var propIdToAdd = $(this).closest("p").attr("id");

    var myFavouriteProp = JSON.parse(localStorage.getItem("data"));

    if (data.Properties.id == myFavouriteProp) {
        alert("Same property is already favourited!");
    } else(myFavouriteProp == null)
    myFavouriteProp = [];
    myFavouriteProp.push(propIdToAdd);

    localStorage.setItem("data", JSON.stringify(myFavouriteProp));
} catch (e) {
    if (e == QUOTA_EXCEEDED_ERR) {
        console.log("Error: Local Storage limit Exceeded");
    } else {
        console.log("Error: Saving to Local Storage");
    }
}

});
$("#viewFavourites").on("click", function() {
console.log("Restoring array data from local storage");

myFavouriteProp = JSON.parse(localStorage.getItem('data'));
var output = "<ul>";
if (myFavouriteProp != null) {
    for (var i = 0; i < data.Properties.length; i++) {
        for (j = 0; j < myFavouriteProp.length; j++) {
            if (data.Properties[i].id == myFavouriteProp[j]) {
                output += "<li>" + data.Properties[i].id + "</li>";
            }
        }
    }
}
output += "</ul>";
document.getElementById("placeholder").innerHTML = output;
});
});

我没有指出这一点，但是，我如何让它查看我的所有 id？即prop1，prop2。我的保存功能当前会覆盖存储在本地存储中的旧值。但是我的旧保存功能允许我显示如下所示的所有 ID 代码：

    $(".save").on("click", function(){
  try{
      $(this).attr('disabled',true);

      var propIdToAdd = $(this).closest("p").attr("id");

      var myFavouriteProp = JSON.parse(localStorage.getItem('data'));
      if (myFavouriteProp == null) {
          myFavouriteProp = [];
      }
      myFavouriteProp.push(propIdToAdd);

      localStorage.setItem('data', JSON.stringify(myFavouriteProp));
  }
  catch(e) {
      if (e == QUOTA_EXCEEDED_ERR) {
          console.log("Error: Local Storage limit exceeds. ");
      }
      else {
          console.log("Error: Saving to local storage.");
      }
  }
  });

此外，当我尝试添加 if (data.Properties.id == myFavouriteProp[0]) 时，它会阻止我的按钮工作。单击保存按钮，然后单击查看按钮后，没有显示任何内容。如果没有 [0]，它会显示警报框以及存储中包含的内容。但就像我说的，我当前的代码（不是旧的）覆盖旧数据并用新数据替换它。它不应该这样做。它应该允许我显示 prop1、prop2 等的 id 值。在覆盖值 id prop1 后，它本身不是 prop2。它们不应覆盖，因为它们是不同的 id。

Answer 1

在我看来，当您保存时，您的 myFavouriteProp 变量是一个包含一个元素 propId 的数组。基本上在 JSON 中，它看起来像这样[2]。

在if (data.Properties.id == myFavouriteProp) 中，您将data.Properties.id（我假设它是一个整数）与myFavouriteProp（我认为它是一个数组）进行比较（您正在比较2 == [2]）。这永远不会是真的。

我会将比较更改为 if (data.Properties.id == myFavouriteProp[0])，看看这是否更适合您。这会将整数值与整数值进行比较，并且应该按照您期望的方式工作。