Tengo un problema con el getItem de mi localStorage en mi React Form. Puse un atributo onChange:
<div className = 'InputForm' onChange={save_data}>Encontré la función setItem para almacenar los datos. Aquí está la función:
function save_data(){ let textarea = document.querySelectorAll("textarea") let input = document.querySelectorAll("input[type='text']") let saved_fields = [] textarea.forEach(x => { saved_fields.push({ key: x.className, value: x.value }) }) input.forEach(x => { saved_fields.push({ key: x.className, value: x.value }) }) localStorage.setItem("saved_data", JSON.stringify(saved_fields)) }Mi principal problema es que no encuentro una manera de volver a colocar los datos en la página después de que se recarga la página. Acabo de descubrir cómo persistir todas mis entradas en la consola:
window.onload = dataLoad(); function dataLoad () { let show_saved_data = localStorage.getItem("saved_data"); console.log('show_saved_data:',JSON.parse(show_saved_data)); }¿Pueden ayudarme a encontrar la función de recuperación/persistencia de datos?
¿Podemos tener su formulario HTML para ayudarle? No debe identificar sus entradas/áreas de texto por su nombre de clase.
Después de eso, al usar ID como identificadores para su entrada/área de texto, solo tiene que hacerlo a la inversa:
function dataLoad () { var show_saved_data = localStorage.getItem("saved_data"); var inputList = JSON.parse(show_saved_data); inputList.forEach(x => { document.getElementById(x.key).setAttribute('value', x.value); }) }Si nos proporciona su HTML/JS completo, será más fácil brindarle una solución completa.