.data()?.data() stores or reads arbitrary values on matched elements in jQuery’s internal cache (since 1.2.3) — safer than inventing expando properties yourself.
$("#el").data("foo", 52) // set
$("#el").data("foo") // → 52
$("#el").data({ bar: true }) // set many (1.4.3+)
$("#el").data() // → { foo: 52, bar: true }
// HTML5 data-* seeds the cache on first read:
// <div data-role="page" data-last-value="43">
$("#el").data("role") // → "page"
$("#el").data("lastValue") // → 43 (camelCase)| Need | Use |
|---|---|
| Store / read JS values | $("#el").data(key[, value]) |
Change the data-* attribute | $("#el").attr("data-key", value) |
| Clear a key | $("#el").removeData(key) |
| Static form (DOM node) | $.data(element, key, value) |
.data()Pick a key, set a value, then read it back when you need it.
.data(key, value) or .data({ key: value })..data(key) or .data() for the whole object..removeData(key) when finished.| Piece | Required? | Role |
|---|---|---|
key | Yes* | String name (*omit for full object getter) |
value | Optional | Any JS type except undefined |
obj | Optional | Shallow-merge many keys (1.4.3+) |
| Return | — | Setter → jQuery; getter → value or object |
cache = jQuery private store for element
if first .data() call and element has data-* attrs:
copy attrs into cache (with type conversion)
// attrs are not read again after this
if setting key, value:
if value is undefined: return jQuery (no store)
cache[key] = value // does NOT write attribute
return jQuery
if setting object:
shallow_merge(cache, object)
return jQuery
if reading key:
return cache[key] // or undefined
if reading all:
return cache object // {} when emptyKeep these facts handy while attaching element data.
| Topic | Detail |
|---|---|
| Set one | .data(key, value) since 1.2.3 |
| Set many | .data(obj) since 1.4.3 (shallow merge) |
| Get one / all | .data(key) / .data() (all since 1.4) |
| data-* | Seeds cache on first read (1.4.3+) |
| Dashes (jQuery 3) | data-last-value → lastValue |
| undefined | Not stored — setter returns jQuery only |
| Avoid on | object, applet, embed |
Set and read keys on a demo element with .data().
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Store a number, then read it back.
$("#box").data("foo", 52);
console.log($("#box").data("foo")); // 52$("#box") is the element that owns the data..data("foo", 52) stores 52 under the key foo..data("foo") returns that value from the cache.Attach a structured value and read its properties.
$("div").data("test", { first: 16, last: "pizza!" });
console.log($("div").data("test").first); // 16
console.log($("div").data("test").last); // "pizza!"test..data("test") returns that object reference..first / .last like any JS object.data-* AttributesOn first access, jQuery seeds the cache from markup.
// <div id="page" data-role="page" data-last-value="43" data-hidden="true">
console.log($("#page").data("role")); // "page"
console.log($("#page").data("lastValue")); // 43
console.log($("#page").data("hidden")); // truedata-* attributes declare initial values in HTML.data-last-value becomes lastValue..attr("data-last-value") if you need the raw attribute text..removeData()Store a value, then remove it from the cache.
$("div").data("blah", "hello");
console.log($("div").data("blah")); // "hello"
$("div").removeData("blah");
console.log($("div").data("blah")); // undefinedblah is stored as "hello"..data("blah") returns the string..removeData("blah") deletes that cache key.undefined.Check these before relying on .data() in production.
data-*Use .attr() when the attribute in the DOM must change for CSS or other scripts.
undefined is not stored.data("x", undefined) only returns the jQuery object. Use null or .removeData().
object / embed / appletBrowsers and plugins make .data() unreliable on those elements.
.clone(true) for dataDefault .clone() copies markup only. Pass true to copy .data() and events.
.data() has been available since jQuery 1.2.3. Reading all keys arrived in 1.4; object setters and data-* seeding in 1.4.3; camelCase dash rules align with the dataset API in jQuery 3.
Supported in all browsers that run a modern jQuery build. Prefer jQuery 3.x for dataset-aligned key names.
Bottom line: Safe for everyday DOM apps. Pair with .removeData() to avoid holding large objects longer than needed.
| Approach | Cost | Best for |
|---|---|---|
.data(key, value) | Cheap | Per-element state |
Huge objects in .data() | Memory heavy | Avoid long-lived large payloads |
.attr("data-*") every time | String only | When markup/CSS must see the value |
Prefer .data() for runtime state. Clear unused keys with .removeData(), especially on long-lived SPA pages.
.removeData() when keys are done.One line: .data() is the jQuery way to hang typed state on a DOM element without polluting attributes.
Learn how to clear keys from the jQuery element data store.
9 people found this page helpful