jQuery .data() Method

What You’ll Learn

The jQuery.data() utility attaches arbitrary JavaScript values to DOM elements — safely and without memory leaks. This tutorial covers set/get syntax, official object storage demos, reading the full data store, comparisons with .data() (preferred collection method), and pairing with removeData.

Introduction

This page covers the static utility jQuery.data() (same API as api.jquery.com/jQuery.data). The preferred collection method .data() is documented under DOM.

Sometimes you need to remember information about a DOM element — plugin state, cached calculations, widget options, or temporary flags — without cluttering the HTML with extra attributes or global variables.

jQuery provides jQuery.data() (also written $.data()) as a low-level static utility to attach any JavaScript value to an element. jQuery manages the storage internally, avoids circular-reference leaks, and cleans up when elements are removed through jQuery. For everyday chaining, the instance method .data() on jQuery collections is usually more convenient but understanding the static API matters for plugins and internals.

Understanding the jQuery.data() Method

jQuery.data(element, key, value) stores value under key on the given DOM element and returns the value that was set.

jQuery.data(element, key) retrieves a single stored value. jQuery.data(element) with no key returns the entire internal data object — including keys jQuery itself uses for events.

📝 Syntax

Three overloads of jQuery.data:

// Set a value (returns the value set)

jQuery.data( element, key, value )



// Get one key

jQuery.data( element, key )



// Get entire data store (since jQuery 1.4)

jQuery.data( element )

Parameters

• element — the DOM element to associate with data.
• key — string name for the stored value (omit when reading all data).
• value — any JavaScript type except undefined.

Return value

• When setting: returns the stored value.
• When getting one key: returns the stored value or undefined if missing.
• When getting all: returns an object of all keys (may include jQuery internals).

Minimal workflow

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

$.data(el, "open", true);

if ($.data(el, "open")) {

  // widget is open

}

Examples Gallery

Each example uses $.data() with jQuery 3.7.1. Open DevTools or use the Try-it links to run them interactively.

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 = $("div")[0];



jQuery.data(div, "test", {

  first: 16,

  last: "pizza!"

});



console.log(jQuery.data(div, "test").first); // 16

console.log(jQuery.data(div, "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 = $("div")[0];



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

function initTabs(el) {

  $.data(el, "tabs", { active: 0, count: 3 });

}



function setActiveTab(el, index) {

  var state = $.data(el, "tabs");

  state.active = index;

  console.log("active tab: " + state.active);

}



var root = document.getElementById("tabs");

initTabs(root);

setActiveTab(root, 2); // active tab: 2

active tab: 2

🚀 Common Use Cases

• Plugin state — store widget options and flags on root elements.
• Cached computations — remember expensive layout or size results.
• Event metadata — jQuery itself stores handler data internally.
• Drag-and-drop — track source index or payload on dragged nodes.
• Lazy initialization — mark elements as already enhanced.
• Avoid globals — keep per-element data off window.

📝 Notes

• Available since jQuery 1.2.3 — full-store read since 1.4.
• Low-level API — prefer .data() for chaining and data-* support.
• Static $.data does not read HTML data-* attributes by itself.
• undefined cannot be stored; passing it as value triggers a get instead.
• jQuery stores its own internal keys — inspect carefully when dumping all data.
• Setting data on XML documents is not fully cross-browser — stick to HTML elements.
• Related: jQuery.removeData(), .data(), .removeData().

💡 Best Practices