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

我不知道如何解释这一点，但基本上我希望用户在试图保存本地存储中已有的数据时得到提醒，即用户单击保存按钮将数据保存到收藏夹（本地存储）。但是，当他们第二次尝试时，应该这样说：“这已经保存，除非您从存储中删除数据，否则无法再次保存”。我可以让它在用户单击按钮保存数据后显示存储中的内容。我正试图用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;
});
});

---

另外，当我尝试添加

if（data.Properties.id==MyFavoriteProp[0]）

时，它会停止按钮的工作。单击“保存”按钮，然后单击“查看”按钮后，将不显示任何内容。如果没有[0]，它将显示警报框以及存储器中包含的内容。但正如我所说，我当前的代码（不是旧代码）覆盖了旧数据，并用新数据替换它。它不应该这样做。它应该允许我显示prop1、prop2等的id值，而不是在覆盖值id prop1后显示prop2本身。它们不应该覆盖，因为它们是不同的ID。

在我看来，在保存时，您的

myfavoriteprop

变量是一个数组，它将包含一个元素

propId

。基本上在JSON中，它看起来像这样

在

if（data.Properties.id==myfavoriteprop）

中，您正在将

data.Properties.id

与myfavoriteprop进行比较，myfavoriteprop是一个数组（您正在进行比较

2=[2]

）。这永远不会是真的

---

我会将比较改为

if（data.Properties.id==myfavoriteprop[0]）

，看看这是否更适合您。这将比较整数值与整数值，并应按照您预期的方式工作。

“这已经保存，除非您从存储器中删除数据，否则无法再次保存”-什么？用户为什么要这样做？对不起，如果我不清楚的话，基本上用户只能保存唯一值一次（“id”=“prop1”）。我有一个删除本地存储的按钮。你的

else

子句有点奇怪，因为你的

else

后面跟了一个括号

（

），而不是预期的花括号

{

。始终运行

else

后面的代码，但不在括号内，因为它不包含在括号内。尝试添加此代码。但我不确定我做错了什么。我的“保存到收藏夹”按钮在我第一次单击按钮后，它将永久变灰。只有在清除本地存储后，它才会停止变灰。在保存函数的顶部，您有

$（this）.attr（'disabled'，true）当第一次单击“保存”按钮时，这将始终禁用“保存”按钮。我看不出它在代码中的何处被重新启用。要重新启用它，请使用函数
$（This）。removeAttr（'disabled'））
.Oops my bad忘记删除它。很抱歉，如果我不清楚，如果用户事先单击按钮将数据存储到本地存储器，他们应该会收到警报，说他们已经保存了数据。我该怎么做？当我再次尝试单击时，不会显示警报。抱歉，我是初学者。如果（data.Properties.id==myfavoriteprop）

到

if（data.Properties.id==myfavoriteprop[0]）

如我在回答中所述应该可以工作。如果不行，在前面提到的if语句上面，我将尝试使用

console.log（data.Properties.id）

和

console.log（myfavoriteprop）将变量打印到控制台

查看它们的值是什么以及它们是否匹配。我没有指出这一点，但是，我如何允许它查看我的所有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.");
      }
  }
  });