jQuery.data() Method

What Is jQuery.data()?

jQuery.data() (alias $.data) attaches arbitrary JavaScript values to a DOM element without memory-leak risk from circular references (since jQuery 1.2.3). It is the low-level store behind jQuery’s data API.

$.data(element, key, value)  → set (returns value)
$.data(element, key)         → get one key
$.data(element)              → full data object

$.data(document.body, "foo", 52);
$.data(document.body, "foo");  // 52

How to Use jQuery.data()

Pass a DOM element, a string key, and optionally a value.

1. Get a native element: document.getElementById("box") or $("#box")[0].
2. Set with $.data(el, "key", value) — any type except undefined.
3. Read with $.data(el, "key"), or $.data(el) for the whole store.
4. Remove with $.removeData(el, "key") when finished.

Pseudocode

function data(element, key, value):
    if value is provided and value is not undefined:
        store[element][key] = value
        return value
    if key is provided:
        return store[element][key]
    return store[element]   // full object (may include jQuery internals)

// Prefer everyday: $(el).data(key, value)
// Use $.data when you already hold a raw element

Cheat Sheet

Keep these facts handy while storing element data.

Live Preview

Set, read, or clear a key on a hidden demo element with $.data.

$.data(el, "foo", 52)
$.data(el, "foo") → 52

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

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

console.log(jQuery.data(document.body, "foo"));  // 52
console.log(jQuery.data(document.body, "bar"));  // "test"

52
test

var div = document.getElementById("box");

jQuery.data(div, "test", {
  first: 16,
  last: "pizza!"
});

var test = jQuery.data(div, "test");
console.log(test.first);  // 16
console.log(test.last);   // "pizza!"

16
pizza!

var el = document.getElementById("panel");

$.data(el, "foo", 52);
$.data(el, "bar", "test");

var store = $.data(el);
console.log(store.foo);  // 52
console.log(store.bar);  // "test"

52
test

var div = document.getElementById("box");

jQuery.data(div, "blah", "hello");
console.log(jQuery.data(div, "blah"));  // "hello"

jQuery.data(div, "blah", 86);
console.log(jQuery.data(div, "blah"));  // 86

jQuery.removeData(div, "blah");
console.log(jQuery.data(div, "blah"));  // undefined

hello
86
undefined

Performance Notes

Lookups are cheap. The real cost is holding large objects longer than needed — remove data when widgets tear down.

Key Takeaways