Método data() Core jQuery - I

El método data() del core de jQuery sirve para almacenar información en los elementos de la página, en pares nombre de variable y valor. Veremos también el método removeData() para eliminar datos almacenados. 

Seguimos viendo componentes interesantes del "Core" de jQuery, donde están las clases y métodos más básicos de este framework Javascript. En esta entrega del manual de jQuery de DesarrolloWeb.com, explicaremos el uso del método data() y removeData(), que sirven para almacenar, consultar y eliminar cualquier tipo de dato en elementos de la página. 

En algunas ocasiones resulta útil almacenar variables u objetos en determinados elementos de la página. Aunque quizás no es una acción muy corriente en los primeros pasos con jQuery, en el futuro encontraréis que resulta útil y veréis herramientas y plugins que utilizan este mecanismo para su operativa. 

De modo que conviene al menos saber que esto es posible y conocer de qué manera podemos utilizar los elementos de la página para guardar cosas en ellos. Para ello vamos a comentar dos métodos distintos que forman parte del core de jQuery: 

Método data() 

Este método del objeto jQuery sirve tanto para guardar un dato en un elemento como para consultarlo. Según el número de parámetros que reciba, realiza una u otra acción. 

• Si recibe un parámetro data(nombre): devuelve el valor que haya en el dato cuyo nombre se pasa por parámetro. 

• Si recibe dos parámetros data(nombre, valor): almacena un dato, cuyo nombre recibe en el primer parámetro, con el valor que recibe en el segundo parámetro. Como data() es un método que pertenece al objeto jQuery, podemos almacenar estos pares (dato, valor) en cualquiera de los elementos que seleccionemos con la función jQuery(). Veamos un caso de uso simple. Por ejemplo tenemos un elemento de la página como este:

<div id="capa">

En esta división (elemento id="capa") voy a guardar y leer datos sobre este elemento.

</div>

Ahora podríamos usar le método data() de la siguiente manera:

$("#capa").data("midato","mivalor");

Con esta línea hemos guardado un dato llamado "midato" con el valor "mivalor", en el elemento con identificador (atributo id) "capa".

Ahora podríamos leer ese dato en cualquier momento para acceder a su valor, de la siguiente manera:

alert($("#capa").data("midato"));

En esta línea de código extraemos el dato "midato" del elemento con identificador "capa" y lo mostramos en una caja de alerta.

Podemos ver una página en marcha que hace uso de esas dos funciones.