Pasando 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 parametros en la URL ¿Que es Esto? Facil, tenemos la direccion de la pagina y a esta le añadimos unos parametros adicionales que contendran los valores que queremos pasar y quedaria algo asi...

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

Noten que despues del simbolo '?' 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 continuacion son los parametros y no hay que preocuparce por nada dado que el servidor interpreta que queremos entrar a la pagina 'informacion.htm' asi que no se producira ningun tipo de error.

Bueno ahora les explicare el ejemplo sobre el cual aplicaremos este articulo. La idea es hacer un tablon de noticias, para esto tenemos dos paginas 'titulares.htm' que muestra solo los titulos de las noticias y 'leer.htm' que muestra la noticia pasada como parametro. Les recomiendo que antes vean el ejemplo funcionando haciendo click aqui.

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 direccion URL dado que el navegador cambia los caracteres de espacio por los signos '%' aparte de otras modificacion, entonces debemos asegurarnos de 'descodificar' la URL para ello nesecitamo estas linea de codigo...

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

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

Con estas 5 lineas de codigo ya tenemos la URL descodificada y almacenada en la variable 'url', lo que le mostraremos a continuacion es la funcion que nos devolvera el valor del parametro 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 todavia no lo hicieron, que miren el ejemplo haciendo click aqui, en el mismo tambien podran encontrar el codigo fuente corespondiente a cada uno. Saludos, El Guru.