Pasar variable a través de JavaScript de una página html a otra página
Tengo dos páginas: "página 1" y "página 2". En la página 1 hay un cuadro de texto con un valor de, por ejemplo, 100 y un botón al final.
Al presionar el botón, quiero que JavaScript guarde el valor del cuadro de texto en una variable global (?) y salte a la página 2. Con "window.onload" quiero una segunda función de Javascript para alertar el valor guardado en la página 1.
Aquí está mi código Javascript:
<script type="text/javascript">
var price; //declare outside the function = global variable ?
function save_price(){
alert("started_1"); //just for information
price = document.getElementById('the_id_of_the_textbox').value;
alert(price); //just for information
}
<script type="text/javascript">
function read_price(){
alert("started_2");
alert(price);
}
En la "página 1" tengo este botón de envío con:
<input class="button_send" id="button_send" type="submit" value="Submit_price" onclick="save_price();"/>
Inicia la función Javascript y me redirige correctamente a mi página2.
Pero con esto en la segunda página:
window.onload=read_price();
Siempre obtengo un valor "indefinido" del precio variable global.
He leído mucho sobre esas variables globales. Por ejemplo, en esta página: Problema con la variable global... Pero no puedo hacerlo funcionar...
¿Por qué esto no funciona?
Sin leer su código sino solo su escenario, lo resolvería usando localStorage. Aquí hay un ejemplo que usaré prompt()para abreviar.
En la página 1:
window.onload = function() {
var getInput = prompt("Hey type something here: ");
localStorage.setItem("storageName",getInput);
}
En la página 2:
window.onload = alert(localStorage.getItem("storageName"));
También puede utilizar cookies, pero localStorage permite muchos más espacios y no se envían a los servidores cuando solicita páginas.
Su mejor opción aquí es utilizar la cadena de consulta para "enviar" el valor.
cómo obtener el valor de la cadena de consulta usando javascript
- Entonces la página 1 redirige a page2.html?someValue=ABC
- La página 2 luego puede leer la cadena de consulta y específicamente la clave 'algúnValor'
Sin embargo, si esto es algo más que un ejercicio de aprendizaje, es posible que desee considerar las implicaciones de seguridad que esto tiene.
Las variables globales no le ayudarán aquí, ya que una vez que se recarga la página, se destruyen.
Tienes algunas opciones diferentes:
- puede utilizar un enrutador SPA como SammyJS o Angularjs y ui-router, para que sus páginas tengan estado.
- use sessionStorage para almacenar su estado.
- almacene los valores en el hash de URL.
Para ello recomiendo enviar datos dentro de los datos del enlace. Esta es una forma muy sencilla de hacerlo sin PHP. Simplemente obtenga el enlace en la segunda página y reemplace el enlace anterior con "".
Página_Uno.html:
<script>
//Data to be transfered
var data = "HelloWorld";
//Redirect the user
location.replace("http://example.com/Page_Two.html?" + data);
</script>
Página_dos.html:
<script>
//Get the current link
var link = window.location.href;
//Replace all content before ? with ""
link = link.replace("http://example.com/Page_Two.html?","");
//Display content
document.write("Page_One.html contains:" + link + "");
</script>
¡Espero eso ayude!
