Estoy tratando de mantener lo que guardo en el almacenamiento local en la página, de esa manera, si tuviera que actualizar, todavía tendría lo que ingresé en el cuadro del área de texto.
Sin embargo, no estoy seguro de si es porque estoy usando una variable que se asigna a e.target y luego la ruta relativa a lo que estoy tratando de guardar, pero cuando console.log mi variable dice que no está definida y asumo que mi problema es porque no entiendo completamente jQuery.
function updateHours() {} function handleSave(e) { var value = $(e.target).siblings('.description').val() var hour = $(e.target).closest('.time-block').attr('id') localStorage.setItem(hour, value) } function main() { updateHours(); $(document).on('click', '.saveBtn', handleSave) console.log(localStorage.getItem(value)) } $(document).ready(main)Prueba algo como esto:
function updateHours(){ document.querySelectorAll('.time-block').forEach(el => { const savedValue = localStorage.getItem(el.id); const description = el.querySelector('.description'); if (savedValue && description) { console.debug("Load value", el.id, savedValue); description.value = savedValue; } }); } function handleSave(e){ const el = e.target.closest('.time-block'); if (!el) { return; } const description = el.querySelector('.description'); if (!description) { return; } console.debug("Save value", el.id, description.value); localStorage.setItem(el.id, description.value); } function main(){ updateHours(); document.addEventListener('click', e => { if (!e.target.classList.contains('saveBtn')) { return; } handleSave(e); }); } window.addEventListener('DOMContentLoaded', main);