Método data() Core jQuery

  • Por
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.

Método removeData()

Este método sirve para eliminar un dato de un elemento y su funcionamiento es tan simple como enviar por parámetro el dato que se quiere eliminar del elemento.

$("#capa").removeData("midato")

Con esta línea habríamos eliminado el dato llamado "midato" del elemento con identificador "capa".

Ejemplo completo de los métodos data() y removeData() del Core de jQuery

Veamos un ejemplo completo del uso de estos métodos que acabamos de aprender. Se trata de una página que tiene un elemento sobre el que vamos a guardar datos. Además tiene tres botones para guardar un dato, leerlo y borrarlo. El dato que se guardará tendrá como valor lo que se haya escrito en un campo de texto que aparece también en la página.

Podemos ver el ejemplo en marcha en una página aparte.

Tenemos, para comenzar, un elemento de la página, que es donde vamos a guardar los pares dato-valor con data().

<div id="division">
En esta división (elemento id="division") voy a guardar datos con la función data y luego los voy a leer.
</div>

Luego tendremos este formulario, que contiene el campo de texto así como los tres botones de los que hemos hablado.

<form name="formul">
Escribe un valor a guardar, leer o eliminar:
<input type="text" name="valor" id="valor">
<br>
<input type="button" value="guardar dato" id="guardar">
<input type="button" value="leer dato" id="leer">
<input type="button" value="eliminar dato" id="eliminar">
</form>

Ahora se trata de asignar los comportamientos a estos botones con Javascript, haciendo uso de jQuery.

Este sería el script para agregar el evento click al botón de guardar datos.

$("#guardar").click(function(evento){
   var valor = document.formul.valor.value;
   //Esta misma línea de código se puede codificar así también con jQuery
   //var valor = $("#valor").attr("value");
   $("#division").data("midato",valor);
   $("#division").html('He guardado en este elemento (id="division") un dato llamado "midato" con el valor "' + valor + '"');
});

Como se puede ver, primero se recibe el texto del campo de texto que había en el formulario. Para ello se muestran dos maneras de hacerlo:

  • A través de la jerarquía de objetos del navegador, con document.formul.valor.value
  • A través de su identificador, con un método de jQuery llamado attr() que sirve para recuperar el valor de un atributo HTML pasado por parámetro sobre el elemento que recibe el método. Este modo de obtener el atributo value del campo de texto está comentado, pues sólo lo quería señalar, para que se vea el modo de acceder a un elemento de formulario utilizando las funciones del framework Javascript jQuery.
Luego, se guarda el dato "midato" con el valor que se recuperó del atributo value del campo de texto. Para ello utilizamos el método data() tal como comentábamos.

Por último se muestra un mensaje en el HTML del elemento con id="division", por medio del método html() de jQuery, para informar sobre la acción que acabamos de realizar.

Ahora mostramos el código para asignar un comportamiento al evento click sobre el segundo botón:

$("#leer").click(function(evento){
   valor = $("#division").data("midato");
   $("#division").html('En este elemento (id="division") leo un dato llamado "midato" con el valor "' + valor + '"');
});

Como se puede ver, se recupera el valor del dato "midato" guardado sobre el elemento "#division" (etiqueta HTML con id="division"), y se almacena en una variable. Luego se crea un mensaje para mostrar el valor del dato.

Para acabar, tenemos el código del evento click sobre el botón de eliminar el contenido de un dato, que hace uso de removeData().

$("#eliminar").click(function(evento){
   $("#division").removeData("midato");
   $("#division").html('Acabo de eliminar del elemento (id="division") el dato llamado "midato"');
});

Como se verá, el método removeData() se invoca sobre el elemento que tiene el dato que pretendemos eliminar. Más tarde se muestra un mensaje informando sobre la acción que se ha realizado.

Para comprobar el funcionamiento de estos métodos habría que crear un dato, escribiendo el valor en el campo de texto y pulsando el botón "guardar dato". Luego podríamos leer ese dato con el botón "leer dato". Por último podríamos eliminar el dato con el botón "eliminar dato". Si, una vez eliminado pulsamos sobre el botón de "leer dato" veremos que el valor del dato aparece como "undefined", puesto que ese dato ha sido borrado (esto también ocurre si no se ha guardado ningún dato todavía, por ejemplo cuando se acaba de cargar la página).

Sería interesante ver el código fuente completo de esta página, para hacernos una idea más exacta de cómo se integrarían todos estos elementos. <html>
<head>
   <title>Ejemplos de uso de la función data del core de jQuery</title>
   <script src="../jquery-1.3.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){

   $("#guardar").click(function(evento){
      var valor = document.formul.valor.value;
      //Esta misma línea de código se puede codificar así también con jQuery
      //var valor = $("#valor").attr("value");
      $("#division").data("midato",valor);
      $("#division").html('He guardado en este elemento (id="division") un dato llamado "midato" con el valor "' + valor + '"');
   });
   
   $("#leer").click(function(evento){
      valor = $("#division").data("midato");
      $("#division").html('En este elemento (id="division") leo un dato llamado "midato" con el valor "' + valor + '"');
   });
   
   $("#eliminar").click(function(evento){
      $("#division").removeData("midato");
      $("#division").html('Acabo de eliminar del elemento (id="division") el dato llamado "midato"');
   });
});
</script>
</head>

<body>

<div id="division">
En esta división (elemento id="division") voy a guardar datos con la función data y luego los voy a leer
</div>
<br>
<form name="formul">
Escribe un valor a guardar, leer o eliminar:
<input type="text" name="valor" id="valor">
<br>
<input type="button" value="guardar dato" id="guardar">
<input type="button" value="leer dato" id="leer">
<input type="button" value="eliminar dato" id="eliminar">
</form>

</body>
</html>

De nuevo, dejamos el enlace al ejemplo en marcha.

Para seguir os indicamos la lectura del siguiente artículo de este manual, donde puedes obtener explicaciones adicionales y ejemplos de uso de estos métodos data() y removeData().

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Francisco

17/11/2010
consulta
Hola,
tengo una duda sobre los formularios en dreaweaver, yo tengo una pagina web y quiero hacer un campo de texto con un boton al lado que diga guardar, y cuando se inserte un dato y el usuario aprete la opcion "guardar" se guarde ese texto en una tabla de arriva.¿Qué comportamiento le deberia dar ala boton?Gracias de antemano

erickbuzz

17/1/2012
interesante!
mm asi no le veo mucha utilidad, pero en si cual es su uso....conectarse a una base de datos, manejar variables simples sin sesión....algun juego?

roberto_abrahan_aquino_samaniego

29/8/2012
Duda $(document).ready()
En este caso,
Cual esa la necesidad de que los "eventos" guardar, leer, eliminar esten dentro de
$(document).ready() ????

O sea, para ejemplos anteriores entiendo la necesidad debido a que eran eventos que se ejecutaban al cargarse toda la pagina, pero en este caso son eventos que se ejecutan por accion de un usuario.

Mi consulta seria, que deberiamos tener en cuenta para hacer o no esta validacion
$(document).ready()

o si es una linea obligatoria con jQuey???

Oriol

20/9/2012
Respuesta a la duda de Roberto
La función
$(document).ready(function(){
......
});

Es necesaria porque así te aseguras que antes de clickar uno de los botones para lanzar su evento asociado, todos los elementos de la página y por tante del DOM han sido cargados previamente de manera correcta.

Carlos

06/1/2015
Pregunta
Tus explicaciones son muy buenas. Muchas gracias por hacerlo de esa manera.
Tengo una pregunta que espero me puedas ayudar.

Como debo hacer para leer la data que guardamos. En una página distinta en la que se guardo la data.
Se puede realizar esto? y cómo debo hacerlo?
Muchas gracias de ante mano por tu ayuda.

Saludos,
Carlos.

Ramiro

10/4/2016
AYUDA
Hola ¿es posible guardar los eventos realizados por el usuario y si se actualiza la pag que la pag cargue los eventos realizados por el usuario?
Con este fin quiero lograr que el usuario realice un evento click en un div el div se clone en otro div. el tema es que al actualizar la pag el clon se va porque el evento no se realizo pero si lograra que al hacer click este evento se guarde y se ejecute al actualizar la pag.
supongo que si lograra esto al realizar el evento click y al actualizar la pag o cerrar el navegador y abrirlo nuevamente, quede guardado el div que se clone en otro div.
¿Alguien tiene idea?