使用 JavaScript 在 localStorage 中存储多个 ID

Question

I am wanting to add a favorites function for my website. The technologies I am using are html, css, javascript and json. I am loading the json file thru ajax. A user is able to search for a device and add that device to their favourites and that is done via sessionStorage and localStorage, but my problem is when a user clicks on a new phone to add to their favorite, it overrides it. Do I have to put like an IF statement which will say if there is an id there still add this one. I am confused on how to do this...

Code Samples....

$(document).on('click', '.productfavourite', function(event) { 

  // whichever HTML element has been clicked,
  // grab the id of that and set it as product fave
  productFave = event.target.id;

  localStorage.setItem('productFave', productFave);
  console.log(productFave);
  window.location="favourites.html";
});

Answer 1

I would suggest you save the selected items in an object or array before you write it in to the localStorage. After that you convert the object or array to a json string.

var selected = [];
$(document).on('click', '.productfavourite', function(event) {
    selected.push(event.target.id);
    console.log(selected);
});

this returns an array that your can convert to json. Hope this helps.

Answer 2

So what you need is to keep a collection (list or dictionary) containing the favorites. I'll give you some examples, then you can figure out the rest.

You get the current productFav in your localStorage as follows:

var fav = localStorage.getItem("productFav") || [];

Now you don't want to store one value in localStorage, you want your whole list there. So you add the new favorites to the list and serialize the result as a json string

fav.push(newItem);

localstorage.setitem("productfav", JSON.stringify(fav));

I assumed fav is a list. It's best to use a dictionary if you want to avoid adding duplicated entries

Answer 3

You can also try:

if(Storage !== "undefined") {
   localStorage.setItem("productFave", localStorage.getItem("productFave")+ ", newItemValue3");
}