title: How to prevent storing duplicate values in local storage?
body: <p>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 the local storage i.e. user clicks on a save button to save the data to favourites (local storage). But it should say this when they try the second time "This has already been saved, you cannot save again unless you remove the data from the storage" I can get it to display what is in the storage after the user clicks a button to save the data. I'm trying to do this in html and using my external json file that has the stored data to then save it to the browser's local storage. The user should only be allowed to save the data of a property html page for example only once. I tried switching my if and else conditions but I couldn't get it to work.   </p>
  
  <p>Javascript Code</p>
  
  <pre><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 = "&lt;ul&gt;";
  if (myFavouriteProp != null) {
      for (var i = 0; i &lt; data.Properties.length; i++) {
          for (j = 0; j &lt; myFavouriteProp.length; j++) {
              if (data.Properties[i].id == myFavouriteProp[j]) {
                  output += "&lt;li&gt;" + data.Properties[i].id + "&lt;/li&gt;";
              }
          }
      }
  }
  output += "&lt;/ul&gt;";
  document.getElementById("placeholder").innerHTML = output;
  });
  });
  </code></pre>
  
  <p>I didn't point this out but, how do I allow it to view all of my id's? i.e prop1, prop2. My save function currently overwrites the old values stored in the local storage. But my old save function allowed me to display all the ID's code shown below: </p>
  
  <pre><code>    $(".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.");
        }
    }
    });
  </code></pre>
  
  <p>Also, when I try to add <code>if (data.Properties.id == myFavouriteProp[0])</code> it stops my buttons from working. After I click the save button and then click the view button, nothing is displayed. Without [0] it displays the alert box and what is contained in the storage. But like I said, my current code (not the old one) overwrites old data and replaces it with new data. It should not do this. It should allow me to display id values of prop1, prop2, etc. Not prop2 by itself after overwriting the value id prop1. They should not overwrite as they are different ids.</p>