Inicio » Tutoriales » ¿Cómo pasar datos entre páginas HTML con JavaScript?

¿Cómo pasar datos entre páginas HTML con JavaScript?

En este articulo veremos la posibilidad de pasar datos entre paginas utilizando JavaScript. La forma de hacerlo es pasando estos datos como parámetros en la URL ¿Qué es Esto? Fácil, tenemos la dirección de la pagina y a esta le añadimos unos parámetros adicionales que contendrán los valores que queremos pasar y quedaría algo así…

http://www.servidor.com/informacion.htm?verinfo=2

Noten que después del símbolo ‘?’ hay un texto, bueno, esa es la idea, pero ustedes se preguntaran ¿La pagina ‘informacion.htm?verinfo=2’ existe? y la respuesta es no, la pagina que existe es ‘informacion.htm’ lo que hay a continuación son los parámetros y no hay que preocuparse por nada dado que el servidor interpreta que queremos entrar a la pagina ‘informacion.htm’ asi que no se producirá ningún tipo de error.

Bueno ahora les explicare el ejemplo sobre el cual aplicaremos este articulo. La idea es hacer un tablón de noticias, para esto tenemos dos paginas ‘titulares.htm’ que muestra solo los títulos de las noticias y ‘leer.htm’ que muestra la noticia pasada como parámetro. Les recomiendo que antes vean el ejemplo funcionando haciendo click aquí.

El ejemplo es solo una de las utilidades que puede tener esta rutina de JavaScript, ahora pasaremos a explicar el mismo, lo primero que tenemos que hacer es ‘limpiar’ la dirección URL dado que el navegador cambia los caracteres de espacio por los signos ‘%’ aparte de otras modificación, entonces debemos asegurarnos de ‘descodificar’ la URL para ello necesitamos estas líneas de código…

var remplaza = /+/gi; var url = window.location.href;

url = unescape(url);
url = url.replace(remplaza, " ");
url = url.toUpperCase();

Con estas 5 líneas de código ya tenemos la URL descodificada y almacenada en la variable ‘url’, lo que le mostraremos a continuación es la función que nos devolverá el valor del parámetro que queremos obtener…

<script> function obtener_valor(variable) { var variable_may = variable.toUpperCase(); var variable_pos = url.indexOf(variable_may);

if (variable_pos != -1)
{
var pos_separador = url.indexOf("&", variable_pos);

if (pos_separador != -1)
{
return url.substring(variable_pos + variable_may.length + 1, pos_separador);
} else
{
return url.substring(variable_pos + variable_may.length + 1, url.length);
}
} else
{
return "NO_ENCONTRADO";
}
}
</script>

Para utilizar esta funcion desde el archivo ‘leer.htm’ del ejemplo utilizamos el siguiente codigo…

var valor = obtener_valor("verinfo");

Y lo que a posterior hacemos es mostrar la informacion que corresponda…

if (valor == 1) { document.write (‘Microsoft a sido llevada a juicio por monopolio, ….’); } if (valor == 2) { document.write (‘Luego de vender 1 millon de ejemplares los duñeos de i-node dicen que sus expectativas…’); }

if (valor == 3)
{
document.write (‘Ya son mas de 120 Millones las paginas en la red, dado…’);
}

Les recomiendo, si todavía no lo hicieron, que miren el ejemplo haciendo click aquí, en el mismo también podrán encontrar el código fuente correspondiente a cada uno.

Saludos, El Guru.

Si te gustó, compártelo:

Contenido relacionado