¿Cómo guardar el valor de un input para mostrarlo en otra página?

publicado por: Anonymous

Quisiera saber cómo es posible guardar los datos de un input en una variable PHP para poder mostrarlo en una página siguiente.

Tengo una página web que hace un cálculo en JavaScript y, al final, uno de los campos arroja el total. Después de hacer el cálculo el único campo que me interesa guardar es el campo de total, ya que lo quiero mostrar en la siguiente página.

El código HTML relevante es el siguiente:

<p class="auto-style4">
    <span class="auto-style5">Tu pago total es de</span>
</p>
<div class="auto-style6">
    <input type="text" id="valor5" value="0.00" disabled value="0" size="23" >
    <span class="auto-style7">dólares</span>
</div>

¿Cómo puedo hacerlo para poder guardar ese dato y mostrarlo respectivamente en la otra página?

solución

Dejo aquí varias opciones para pasar datos desde una página a otra. Todos tienen sus ventajas e inconvenientes y dependerá del caso particular para decantarse por uno u otro:

  • ¿Es una cantidad grande de datos?
  • ¿Quieres qye se haga en el lado del cliente o del servidor?
  • ¿Hay restricciones de seguridad?
  • ¿Hay límites por ejemplo de ancho de banda?
  • etc.

En el caso que presentas en la pregunta, personalmente eligiría el SessionStorage (dentro de la opción Local Storage) o directamente pasaría el valor como parte de la URL.

Formularios

Para pasar datos de la página A a la página B puedes usar formularios (bien todo de golpe en un solo campo o formateado en multiples campos), entonces enviar el formulario. Por ejemplo:

<form method="POST" action="page2.php">
    <input type="hidden" name="total" value="valor" />
</form>

Si ya tienes un formulario para hacer esto, entonces considera añadir un campo escondido con el valor que quieres pasar a la segunda página.

Ventajas:

  • Fácil de implementar
  • Diferentes posibilidades (GET o POST, multiples campos o sólo uno)
  • Los datos viajan al servidor, lo que permite hacer operaciones si lo necesitas (ej.: guardar en una base de datos).

Inconvenientes:

  • Tamaño limitado si usas GET: la restricción dependerá de tu servidor y del navegador del cliente.
  • Genera más tráfico: los datos viajarán del cliente al servidor en la primera página y del servidor al cliente en la segunda página.

Para tu caso particular: Esta podría ser una opción, es sencilla y fácil de implementar. Ten en cuenta que si los campos están deshabilitados no se enviarán con el resto del formulario.


Parámetro en la URL

Alternativamente, sin necesidad de formulario, podrías pasar la información en la URL de la nueva página (esto sería equivalente a tener un formulario con un GET, pero sin necesidad de crear el formulario).

Cuando vayas a redirigir a tu segunda página, incluye un parámetro en el enlace a la nueva página:

http://mi.sitio.com/segunda-pagina.php?parametro=valor

Ventajas:

  • Fácil de implementar.
  • Soportado por todos los navegadores.

Inconvenientes:

  • Tamaño limitado (variará de navegador a navegador).
  • Poco seguro: cualquier persona puede ver el valor en la URL.

Para tu caso particular: Esta podría ser una opción, es sencilla y fácil de implementar (es básicamente una versión simplificada de los formularios con GET)


Local Storage

En HTML5 se introdujo la API de Almacenamiento Web que incluye dos métodos para guardar información en el navegador del usuario: LocalStorage y SessionStorage. La diferencia entre los dos métodos es cómo persiste la información, en LocalStorage se guarda de sesión en sesión (y de pestaña a pestaña), con SessionStorage se borra cuando se cierra la ventana.

El código para usarlo es sencillo:

<script type="text/javascript">
    // guardar datos
    localStorage.setItem("nombre", "dato");

    // leer datos
    var miDato = localStorage.getItem("nombre");
</script>

Ventajas:

  • Muy fácil de implementar.
  • Permite guardar más datos que las cookies (al menos 5MB, aunque dependerá de tu navegador).
  • Los datos se guardan de manera local, no viajan al servidor.

Inconvenientes:

  • Si deshabilitas las cookies o JavaScript, LocalStorage dejará de funcionar.
  • Los valores de LocalStorage en páginas seguras (https) son independientes (no se comparten con la misma página en http).

Para tu caso particular: Si no tienes que mandar la información al servidor (para guardarla en una base de datos o procesarla de alguna manera), yo elegiría esta opción.


Cookies

Similar a LocalStorage, las cookies son un clásico. Se pueden implementar del lado del cliente (JavaScript) o del lado del servidor (p.e.: PHP) y el resultado sería similar. Un ejemplo de cómo sería en PHP:

<?php
    $cookie_nombre = "nombre";
    $cookie_valor = "valor";
    setcookie($cookie_nombre, $cookie_valor, time() + (3600 * 24), "/"); 
?>

Ventajas:

  • Fácil de implementar
  • El resultado será similar tanto en PHP como en JavaScript (si no usas cookies con HTTPOnly)

Inconvenientes:

  • Espacio limitado. Aunque esto dependerá de tu navegador, puedes ver los tamaños aquí.
  • No es tan seguro como los otros métodos (no siempre vas a poder confiar en lo que lees)
  • Los usuarios pueden deshabilitar las cookies y entonces este método no funcionará.

Para tu caso particular: antes de ir con esta opción, me quedaría con el LocalStorage.


IndexedDB

Otra funcionalidad que se introdujo en HTML5 fue IndexedDB, que permite crear una base de datos orientada a objetos en local. Así puedes almacenar y recuperar objetos usando una clave.

Ventajas:

  • Buen rendimiento.
  • Permite guardar grandes cantidades de información.
  • Los datos se guardan de manera local y no viajan al servidor.

Inconvenientes:

Para tu caso particular: no optaría por este método porque quieres pasar poca información y usar algo como esto sería matar moscas a cañonazos. Si tuvieras mucha información, eso sería otra historia.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *