Paso de variables Javascript entre páginas (I)

1 . El método
2 . La página origen
3 . La página destino

Muchos habéis preguntado por la manera de pasar variables Javascript entre distintas páginas. Hay más de un modo de hacerlo, y aqui explico el que me parece más sencillo. Aquí tenéis un ejemplo.

El método

Vamos a utilizar el mismo método que se usa para pasar variables a scripts CGI, PHP o ASP. Si os fijas en cualquier buscador, cuando realizáis una búsqueda, la barra de direcciones se os llena de un montón de caracteres un poco extraños, llenos de "?" y "+" por todos lados. Bueno, pues nosotros vamos a utilizar la misma técnica.

Codificaremos nuestras variables en la URL de la dirección destino. Es lo mismo que hace un formulario cuando utilizais el método GET. Podeis ver un ejemplo de cómo funciona.

Aunque, como veremos, es relativamente sencillo pasar estos valores de una página a otra, deberemos tener en cuenta que sólo podemos pasar variables que tengan valores, como puedans er números o cadenas, pero nunca referencias a objetos, como son los vectores.

La página origen

Para generar la dirección destino debemos saber cómo se codifican una lista de variables para introducirlas en una URL. Esto se hace poniendo un símbolo de interrogación (?) detrás del nombre del archivo al que se pasan las variables (que en nuestro caso será destino.html). Después de ese símbolo viene la lista de variables, separada por el símbolo ampersand (&). Cada elemento de dicha lista consiste en el nombre de la variable, el símbolo de igualdad (=) y el valor de la variable.

Sin embargo, y como en una URL podemos incluir muy pocos caracteres, algunos de los valores de las variables tendrán que estar codificados. Por ejemplo, no puede haber espacios en una dirección en formato URL. ¿Cómo incluimos entonces los espacios de nuestras variables tipo cadena? Sustituyendolos por %20, que es el equivalente al espacio dentro de la codificación URL. Así por ejemplo, si tenemos dos variables llamadas var1 y var2 cuyos valores son, respectivamente, 3 y "Hola, que tal", la URL resultante será:

destino.html?var1=3&var2=Hola%2C%20que%20tal

Gracias a Dios, Javascript ofrece una pareja de funciones que permiten codificar y descodificar una cadena a formato URL. Son escape y unescape. Por lo tanto, ya tenemos todo lo que nos hace falta para enviar variables. Para que sea más sencillo utilizaremos una función que, al ser llamada, realice el envío. Esta función se llamará pasarVariables y recibirá dos parámetros de tipo cadena. El primero contendrá el nombre de la página a la que deseamos ir y el segundo una lista separada por comas de las variables que deseamos enviar:

function pasarVariables(pagina, nombres) {
  pagina +="?";
  nomVec = nombres.split(",");
  for (i=0; i<nomVec.length; i++)
    pagina += nomVec[i] + "=" + escape(eval(nomVec[i]))+"&";
  pagina = pagina.substring(0,pagina.length-1);
  location.href=pagina;
}

El método funciona añadiendo a la variable pagina el texto necesario para pasar las variables y, finalmente, redirigirse a la dirección resultado de esos añadidos. Por eso, lo primero es añadir el símbolo de interrogación. Luego crea un vector con los nombres de las variables utilizando el método split. El bucle añade a cada iteración el nombre de la variable, el símbolo de igualdad, el valor de dicha variable codificado en URL y el ampersand. Por último, una vez terminado el bucle, se borra el último ampersand que ya nos sobra.

Por fin, para utilizar esta función, la llamaremos desde un enlace:

<a href="javascript:pasarVariables('destino.html', 'var1,var2')">Pulse
aqu&iacute;</a> 

La página destino

Una vez que sabemos enviar las variables, tendremos que escribir también un poco de código para recibirlas desde la página destino. Este es el código que colocaremos en la cabecera de la página, antes que el resto del código, para que podamos utilizar las variables cuanto antes:

cadVariables = location.search.substring(1,location.search.length);
arrVariables = cadVariables.split("&");
for (i=0; i<arrVariables.length; i++) {
  arrVariableActual = arrVariables[i].split("=");
  if (isNaN(parseFloat(arrVariableActual[1])))
    eval(arrVariableActual[0]+"='"+unescape(arrVariableActual[1])+"';");
  else
    eval(arrVariableActual[0]+"="+arrVariableActual[1]+";");
}

Lo que hacemos en la primera línea es eliminar la interrogación del texto que viene detrás del nombre de la página en la URL. Para lograrlo, escogemos una subcadena de location.search, que es la propiedad que contiene ese texto.

Luego, convertimos esa cadena en un vector que tiene una pareja "variable=valor" en cada uno de sus elementos. Entonces, recorremos cada elemento de dicho vector, creamos un vector temporal que contiene en su primer elemento el nombre de la variable y en el segundo el valor y, utilizando la función eval, creamos la variable asignandola a su valor.

Por último, indicar que dentro del bucle existe una condición que comprueba si la variable es o no numérica para, al hacer la asignación, decidir si encierra o no el valor entre comillas.