0

Buenas quisiera ver si es posible guardar o consercar los datos ingresados en los inputs de un form despues que este sea enviado. Ya que al hacer submit la pagina se refresca entonces, lo que intento es que aunque la pagina se refresque los datos ingresados en el formulario sigan ahi. Vi algo acerca de localStorage pero no logro conseguirlo hasta ahora eh hecho esto:

<body>
    <form method="POST">
        <input type='text' name="server" id="saveServer" />
        <button type="submit" value="Save" id="Save" onclick="save_data()">Save</button>
    </form>
    <script>
        function save_data() {
           var input = document.getElementById("saveServer").value;
           var saveInput = localStorage.setItem("input",input);
           var showStorage = localStorage.getItem("save",input);
        }
    </script>
</body>

Entonces no se como podria llegar a guardar los datos del input en localStorage para que aunque se recargue la pagina o se cierre el navegador los datos sigan ahi.

2 respuestas 2

0

Permíteme proponerte este fragmento de ejemplo que escribí para tu problema:

<!DOCTYPE html>
<html>
    <head>
     <title>Formulario persistente</title>
    </head>
    <body>
        <form method="POST">
            <input type="text" name="server" id="saveServer"/>
            <button type="submit" value="Save" id="Save">Save</button>
        </form>
        <script>

            let serverInput     = document.getElementById('saveServer');
            let saveButton      = document.getElementById('Save');

            saveButton.addEventListener('click', () =>
            {
                localStorage.setItem('serverValue', serverInput.value);
            });

            window.addEventListener('DOMContentLoaded', () =>
            {
                let savedServer  = localStorage.getItem('serverValue');

                if (savedServer)
                {
                    serverInput.value = savedServer;
                }
            });

        </script>
    </body>
</html>

Básicamente, guardas el valor de tu <input> en el LocalStorage cuando envías el formulario mediante el <button>Save</button> en el evento click y lo obtienes cuando el DOM está listo después de recargada la página por el envío del formulario en el evento DOMContentLoaded.

Nota: No es necesario emplear preventDefault().

1
  • 1
    Increible muchas gracias estaba atascado en esto. Muchisimas gracias. el 19 ene. a las 23:20
0

Lo puedes manejar con addEventListener, ahora haciendolo asi puedes evitar el comportamiento de refresco de la pantalla con preventDefault() que trae el evento como tal como ves en el siguiente codigo.

<form action="/">
        <input type='text' name="server" id="saveServer" />
        <button type="submit" value="save" id="save">Save</button>
</form>
<script>
   document.getElementById("save").addEventListener("click", function (event) {
            event.preventDefault();
            const input = document.getElementById("saveServer").value;
            localStorage.setItem("input", input);
   });
</script>

Ahora solo necesitas guardarlo al localstorage y esta listo, puedes recuperarlo de ahi con localStorage.getItem('input');

te dejo la documentación por aca:

te hago una recomendación, los ids no los coloques con mayúscula inicial

6
  • gracias voy a revisarlo el 18 ene. a las 21:58
  • No olvides valorar la respuesta si te fue de utilidad.
    – an-tet
    el 18 ene. a las 22:31
  • Ahorita lo estaba revisando, pero en realidad no qusiera usar preventDefault ya que si quisiera mande a otra pagina despues en hacer submit al form. Entonces mas bien como decia en la consulta es que aunque se cambie de pagina y despues vuelva nuevamente a este form, pues que los datos que se ingresaron en principio sigan ahi. el 19 ene. a las 0:22
  • Puedes hacer la redirección igual aun con el prevent default, ¿te sirve?
    – an-tet
    el 19 ene. a las 4:18
  • Y como se haria en ese caso ya que prevent default evita la redireccion del form? el 19 ene. a las 17:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.