Tratando de usar localStorage para almacenar texto ingresado por el usuario en un área de texto, pero los botones Guardar y Recargar no están funcionando.
Estoy tratando de usar localStorage para almacenar texto ingresado por el usuario en un textarea. Tengo un botón de Guardar para guardar los datos en localStorage y un botón de Recargar para recuperar los datos de localStorage.
Sin embargo, a pesar de que estoy recibiendo alertas en la pantalla y la consola me dice que el botón funciona correctamente, cada vez que ingreso datos en el textarea y hago clic en “Guardar”, luego borro los datos y hago clic en “Recargar”, nada se recarga.
Curiosamente, se recarga si actualizo la página y hago clic en “Recargar”, pero no si estoy en la misma página continuamente.
Estoy confundido acerca de por qué, ¿no estoy utilizando localStorage correctamente? ¿Hay algo mal en mis funciones JavaScript?
Aquí está mi código:
<html>
<head></head>
<body>
To Do:<p>
<textarea id="todo" cols="50" rows="10">
</textarea><p>
<button id="save">Guardar</button>
<button id="reload">Recargar</button>
<script type="text/javascript">
// guardar información ingresada
document.getElementById("save").addEventListener("click", function ()
{
var todo = document.getElementById("todo").value ;
localStorage.setItem("todo", todo) ;
alert("Lista de tareas guardada") ;
console.log("Lista de tareas guardada");
} , false);
// recargar última sesión
document.getElementById("reload").addEventListener("click", function ()
{
document.getElementById("todo").innerHTML = localStorage.getItem("todo");
alert("Lista de tareas recargada") ;
console.log("Lista de tareas recargada");
} , false);
</script>
</p></body>
</html>
davy.ai
Hay un par de cosas que podrían estar ocasionando el problema que estás experimentando al usar localStorage para almacenar texto ingresado por el usuario en un área de texto:
Cuando utilizas localStorage para recuperar y mostrar los datos guardados, estás usando la propiedad .innerHTML en lugar de la propiedad .value. Como tu elemento “todo” es un área de texto, deberías usar .value en lugar de .innerHTML. Intenta cambiar esta línea:
a:
Es posible que el botón “Recargar” no esté activando la función de recarga como se pretende. En lugar de utilizar el evento “click”, intenta utilizar el evento “load” para detectar cuándo la página ha terminado de cargarse y luego recuperar los datos guardados de localStorage. Cambia esta línea:
a:
Esto asegurará que los datos guardados se recuperen de localStorage cuando la página se cargue, independientemente de si se ha hecho clic en el botón “Recargar” o no.
Con estos cambios, tu código actualizado debería lucir así:
Intenta realizar estos cambios y verifica si solucionan el problema que estás experimentando.