How can I prevent duplicate values ​​from being stored in local storage?

I'm not sure how to explain this, but basically I want the user to be alerted when they try to save data that is already in local storage, i.e. the user clicks the save button to save the data to favorites (local storage). But he should say this when they try a second time "This has already been saved, you cannot save again unless you delete the data from the repository." I can get it to display what is in the store after the user clicks a button to save the data. I am trying to do this in html and using my external json file that stores the data and then stores it in the browser's local storage. The user should only be allowed to save data in the html property page only once. I tried to switch my if and else conditions,but I couldn't get it to work.

Javascript code

$(".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;
});
});

      

        
        
        
      

    

I haven't pointed this out, but how can I let it see all my IDs? that is, prop1, prop2. My save function is currently overwriting the old values ​​stored in local storage. But my old save function allowed me to display all the ID shown below:

    $(".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.");
      }
  }
  });

      

        
        
        
      

    

Also, when I try to add if (data.Properties.id == myFavouriteProp[0])

it stops working with my buttons. After I click the Save button and then click the View button, nothing is displayed. Without the [0], it displays a warning window and what's in the store. But as I said, my current code (not the old one) overwrites the old data and replaces it with the new data. He shouldn't do this. This should allow me to display the values ​​of id prop1, prop2, etc. Not prop2 on its own after overwriting the id1 value of prop1. They should not be overwritten as they are different from identifiers.