Estoy tratando de usar localStorage para almacenar el texto ingresado por el usuario en el área de texto. Tengo un botón Guardar para guardar los datos en localStorage y un botón Recargar para recuperar los datos en localStorage.
Sin embargo, aunque estoy recibiendo alertas en pantalla y la consola me dice que el botón funciona correctamente, cada vez que ingreso datos en el área de texto y hago clic en "Guardar", luego elimino 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 en cuanto a por qué, ¿no estoy usando localStorage correctamente? ¿Hay algún problema con mis funciones de 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">Save</button> <button id="reload">Reload</button> <script type="text/javascript"> //save entered info document.getElementById("save").addEventListener("click", function () { var todo = document.getElementById("todo").value ; localStorage.setItem("todo", todo) ; alert("Saved To-Do List") ; console.log("Saved To-Do List") } , false); //reload last session document.getElementById("reload").addEventListener("click", function () { document.getElementById("todo").innerHTML = localStorage.getItem("todo"); alert("Reloaded To-Do List") ; console.log("Reloaded To-Do List") } , false); </script> </body> </html>Reemplaza esta línea document.getElementById("todo").innerHTML ='Your code' por este document.getElementById("todo").value ='Your code' .
Prueba este código, funciona.
<html> <head></head> <body> To Do:<p> <textarea id="todo" cols="50" rows="10"> </textarea> <p> <button id="save">Save</button> <button id="reload">Reload</button> <script type="text/javascript"> //save entered info document.getElementById("save").addEventListener("click", function () { var todo = document.getElementById("todo").value; localStorage.setItem("todo", todo); alert("Saved To-Do List"); console.log("Saved To-Do List") }, false); //reload last session document.getElementById("reload").addEventListener("click", function () { document.getElementById("todo").value = localStorage.getItem("todo"); alert("Reloaded To-Do List"); console.log("Reloaded To-Do List") }, false); </script> </body> </html>