Estoy usando localStorage en JavaScript. Al momento de guardar, se guarda todo bien y se actualiza correctamente; al borrar todo del arreglo, en el momento se elimina del DOM, pero al recargar la página, vuelve a aparecer. Solo me pasa con un solo elemento.
Les adjunto el código:
const mascotaInput = document.querySelector('#mascota');
const propietarioInput = document.querySelector('#propietario');
const telefonoInput = document.querySelector('#telefono');
const fechaInput = document.querySelector('#fecha');
const horaInput = document.querySelector('#hora');
const sintomasInput = document.querySelector('#sintomas');
const btnEnviar = document.querySelector('.btn')
const formulario = document.querySelector('#nueva-cita')
const contenedorCitas = document.querySelector('#citas')
document.addEventListener('DOMContentLoaded',()=>{
admnistrarCitas.citas = JSON.parse(localStorage.getItem('citas'));
ui.añadirCita(admnistrarCitas );
})
// -------------------------------------------------------------CLASESSSS
class Citas {
constructor() {
this.citas = [];
}
agregarCita(cita) {
this.citas = [...this.citas, cita]
console.log(this.citas)
}
eliminarCita(id){
this.citas = this.citas.filter(cita => cita.id !== id);
}
}
class UI {
imprimirAlerta(mensaje, tipo) {
// Creamos el div que va a contener el mensjae
const divMensaje = document.createElement('div');
divMensaje.classList.add('text-center', 'alert', 'd-block', 'col-12');
// Agregar clase en base al tipo de error
if (tipo === 'error') {
divMensaje.classList.add('alert-danger');
} else {
divMensaje.classList.add('alert-success')
}
//MEnsaje de error
divMensaje.textContent = mensaje;
// Agregar al DOM
document.querySelector('#contenido').insertBefore(divMensaje, document.querySelector('.agregar-cita'))
setTimeout(() => {
divMensaje.remove();
}, 3000);
}
añadirCita({ citas }) {
this.limpiarHTML();
citas.forEach(cita => {
const { mascota, propietario, telefono, fecha, hora, sintomas, id } = cita;
const divCita = document.createElement('div');
divCita.classList.add('cita', 'p-3')
divCita.dataset.id = id;
// Scripting de los elementos
const mascotaP = document.createElement('h2');
mascotaP.classList.add('card-title', 'font-wight-bolder');
mascotaP.textContent = mascota;
const propietarioP = document.createElement('p');
propietarioP.innerHTML = `<span class="font-wight-bolder"> Propiertario: </span> ${propietario}`
const telefonoP = document.createElement('p')
telefonoP.innerHTML = `<span class="font-wight-bolder"> Telefono: </span> ${telefono}`
const fechaP = document.createElement('p')
fechaP.innerHTML = `<span class="font-wight-bolder"> Fecha: </span> ${fecha}`
const horaP = document.createElement('p')
horaP.innerHTML = `<span class="font-wight-bolder"> Hora: </span> ${hora}`
const sintomasP = document.createElement('p')
sintomasP.innerHTML = `<span class="font-wight-bolder"> Sintomas: </span> ${sintomas}`
// BTN ELMINAR
const bntEliminar = document.createElement('button')
bntEliminar.classList.add('btn','btn-danger','mr-2')
bntEliminar.innerHTML = 'Eliminar <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>'
bntEliminar.onclick= () => eliminarCita(id);
// BTN Editar
const btnEditar = document.createElement('button')
btnEditar.classList.add('btn','btn-info');
btnEditar.innerHTML = `Editar <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path></svg>`
btnEditar.onclick = () => editarEleccion(cita);
// Agregar parrafo a div cita
divCita.appendChild(mascotaP);
divCita.appendChild(propietarioP);
divCita.appendChild(telefonoP);
divCita.appendChild(fechaP);
divCita.appendChild(horaP);
divCita.appendChild(sintomasP);
divCita.appendChild(bntEliminar);
divCita.appendChild(btnEditar)
// Agregar cita al HTML
contenedorCitas.appendChild(divCita);
sincronizarStorage();
});
}
limpiarHTML(){
while(contenedorCitas.firstChild){
contenedorCitas.removeChild(contenedorCitas.firstChild)
}
}
}
// Instanciar citqas
const ui = new UI();
const admnistrarCitas = new Citas();
// -------------------------------------------------------- EVENT LISTENERS
eventListeners();
function eventListeners() {
mascotaInput.addEventListener('input', datosCita);
propietarioInput.addEventListener('input', datosCita);
telefonoInput.addEventListener('input', datosCita);
fechaInput.addEventListener('input', datosCita);
horaInput.addEventListener('input', datosCita);
sintomasInput.addEventListener('input', datosCita);
formulario.addEventListener('submit', nuevaCita)
}
// ------------------------------------------------------ FUNCIONES
const citasObj = {
mascota: '',
propietario: '',
telefono: '',
fecha: '',
hora: '',
sintomas: ''
}
// aGREGA DATOS AL OBJ DE CITAS
function datosCita(e) {
citasObj[e.target.name] = e.target.value;
// console.log(citasObj)
}
// Validar y agrega nueva cita
function nuevaCita(e) {
e.preventDefault();
// Extraer info from objec cita
const { mascota, propietario, telefono, fecha, hora, sintomas } = citasObj;
// Validar
if (mascota === '' || propietario === '' || telefono === '' || fecha === '' || hora === '' || sintomas === '') {
ui.imprimirAlerta('Todos los campos son obligatorios', 'error');
return;// ESt es para que no continue ejecutando en caso de que sea true la de arriba
}
// Generar un id para cadad cita
citasObj.id = Date.now();
// Crear nueva cita
admnistrarCitas.agregarCita({ ...citasObj })
//Reiniciar VAlores
ui.imprimirAlerta('Se ha añadido correctamente')
formulario.reset();
// Reiniciar el objeto tambien
reiniciarObjeto();
// Mostrar el HTML
ui.añadirCita(admnistrarCitas);
console.log(citasObj)
}
// --------------------------------------------------------
// ------------------------------ funciones
function reiniciarObjeto() {
citasObj.mascota = '';
citasObj.propietario = '';
citasObj.fecha = '';
citasObj.hora = '';
citasObj.sintomas = '';
citasObj.telefono = '';
}
function sincronizarStorage(){
localStorage.setItem('citas', JSON.stringify(admnistrarCitas.citas))
}
function eliminarCita(id)
{
admnistrarCitas.eliminarCita(id);
ui.imprimirAlerta('La cita se eliminó correctamente')
ui.añadirCita(admnistrarCitas);
}