Quiero saber si es posible usar Javascript para configurar LocalStoarge para que los elementos los oculten.
El problema es que tienen identificaciones únicas dentro de su atributo de identificación que se genera, por lo que no tiene idea de qué podrían ser, pero si hace clic en el botón Eliminar, debería establecer un elemento y ocultarlo para ese elemento específico con esa identificación específica:
<div class="'.$contact_id.'-chat" id="'.$contact_id.'"> <button onclick="deleteChat(this)">X</button> </div>
Puedes hacerlo de esta manera:
<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"; }) }
Js Fiddle Link mira esto
ocultar todas las identificaciones del almacenamiento local
window.onload = function() { allStorage().map(id => { $("#"+id).hide(); }) }
Obtenga todas las identificaciones en el almacenamiento local
function allStorage() { var values = [], keys = Object.keys(localStorage), i = keys.length; while ( i-- ) { values.push( localStorage.getItem(keys[i]) ); } return values; }
Obtenga la identificación de la clase, oculte el div y configure un elemento en el almacenamiento local
$('.del').on('click', function(event) { $("#"+this.id).hide(); window.localStorage.setItem("id"+this.id, this.id) })