Store arbitrary data associated with the specified element and/or return the value that was set.

## jQuery.data( element, key, value )Returns: Object

Description: Store arbitrary data associated with the specified element. Returns the value that was set.

- #### version added: 1.2.3 jQuery.data( element, key, value )

  - element
    Type: Element
    The DOM element to associate with the data.
  - key
    Type: String
    A string naming the piece of data to set.
  - value
    Type: Anything
    The new data value; this can be any Javascript type except `undefined`.

Note: This is a low-level method; a more convenient `.data()` is also available.

The `jQuery.data()` method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore free from memory leaks. jQuery ensures that the data is removed when DOM elements are removed via jQuery methods, and when the user leaves the page. We can set several distinct values for a single element and retrieve them later:

1 2 |
    jQuery.data( document.body, "foo", 52 );jQuery.data( document.body, "bar", "test" );

### Additional Notes:

- Note that this method currently does not provide cross-platform support for setting data on XML documents, as Internet Explorer does not allow data to be attached via expando properties.
- `undefined` is not recognized as a data value. Calls such as `jQuery.data( el, "name", undefined )` will return the corresponding data for "name", and is therefore the same as `jQuery.data( el, "name" )`.

## Example:

Store then retrieve a value from the div element.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery.data demo</title>  <style>  div {    color: blue;  }  span {    color: red;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <div>  The values stored were  <span></span>  and  <span></span></div> <script>var div = $( "div" )[ 0 ];jQuery.data( div, "test", {  first: 16,  last: "pizza!"});$( "span:first" ).text( jQuery.data( div, "test" ).first );$( "span:last" ).text( jQuery.data( div, "test" ).last );</script> </body></html>

#### Demo:

## jQuery.data( element, key )Returns: Object

Description: Returns value at named data store for the element, as set by `jQuery.data(element, name, value)`, or the full data store for the element.

- #### version added: 1.2.3 jQuery.data( element, key )

  - element
    Type: Element
    The DOM element to query for the data.
  - key
    Type: String
    Name of the data stored.

- #### version added: 1.4 jQuery.data( element )

  - element
    Type: Element
    The DOM element to query for the data.

Note: This is a low-level method; a more convenient `.data()` is also available.

Regarding HTML5 data-* attributes: This low-level method does NOT retrieve the `data-*` attributes unless the more convenient `.data()` method has already retrieved them.

The `jQuery.data()` method allows us to attach data of any type to DOM elements in a way that is safe from circular references and therefore from memory leaks. We can retrieve several distinct values for a single element one at a time, or as a set:

1 2 |
    alert( jQuery.data( document.body, "foo" ) );alert( jQuery.data( document.body ) );

The above lines alert the data values that were set on the `body` element. If nothing was set on that element, an empty string is returned.

Calling `jQuery.data( element )` retrieves all of the element's associated values as a JavaScript object. Note that jQuery itself uses this method to store data for internal use, such as event handlers, so do not assume that it contains only data that your own code has stored.

Note: this method currently does not provide cross-platform support for setting data on XML documents, as Internet Explorer does not allow data to be attached via expando properties.

## Example:

Get the data named "blah" stored at for an element.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
    <!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>jQuery.data demo</title>  <style>  div {    margin: 5px;    background: yellow;  }  button {    margin: 5px;    font-size: 14px;  }  p {    margin: 5px;    color: blue;  }  span {    color: red;  }  </style>  <script src="https://code.jquery.com/jquery-1.10.2.js"></script></head><body> <div>A div</div><button>Get "blah" from the div</button><button>Set "blah" to "hello"</button><button>Set "blah" to 86</button><button>Remove "blah" from the div</button><p>The "blah" value of this div is <span>?</span></p> <script>$( "button" ).click( function() {  var value,    div = $( "div" )[ 0 ];  switch ( $( "button" ).index( this ) ) {  case 0 :    value = jQuery.data( div, "blah" );    break;  case 1 :    jQuery.data( div, "blah", "hello" );    value = "Stored!";    break;  case 2 :    jQuery.data( div, "blah", 86 );    value = "Stored!";    break;  case 3 :    jQuery.removeData( div, "blah" );    value = "Removed!";    break;  }  $( "span" ).text( "" + value );});</script> </body></html>

#### Demo: