Adding Localstorage item for unique IDs

I want to know if its possible to use Javascript to set LocalStoarge for items to hide them.

The catch is they have unique IDs inside their ID attribute that gets generated so you have no idea what they might be but if you click the delete button it should set an item and hide it for that specific item with that specific ID:

<div class="'.$contact_id.'-chat" id="'.$contact_id.'">
 <button onclick="deleteChat(this)">X</button>
</div>

Solution 1:

You can do it this way:

<div class="1-chat" id="'.$contact_id.'">
  <button onclick="deleteChat('.$contact_id.')">X</button>
</div>

window.onload = deleteChats();

function deleteChat(id){
  document.getElementById(id).style.display = "none"
  let items = JSON.parse(localStorage.getItem("deleted_items"));
  if(items){
    items.push(id);
  }
  else{
    items = [id];
  }
  localStorage.setItem("deleted_items",JSON.stringify(items));
}

function deleteChats(){
  const chats = JSON.parse(localStorage.getItem("deleted_items"));
  chats.map(chat => {
    document.getElementById(chat).display = "none";
  })
}