Where is jQuery.data() stored?

Question

Where does jQuery store the values of the data() that it sets to DOM objects?

Is there some kind of variable like jQuery.dataDb or something, maybe even something private?

Is there any way to gain access to this object?

Possible duplicate of http://stackoverflow.com/questions/2764619/how-does-jquery-data-work — Rory McCrossan, Apr 28 '11 at 16:00

score 38 · Accepted Answer · answered Apr 28 '11 at 16:00

38

Internally, jQuery creates an empty object called $.cache, which is used to store the values you set via the data method. Each DOM element you add data to, is assigned a unique ID which is used as a key in the $.cache object.

answered Apr 28 '11 at 16:00

KushalP

10,976
6
34
27

11

+1 But, it would be nice to see this expanded: 1) where are the unique ID's stored? 2) how is the cache purged? is there a "memory leak" if not using jQuery to remove elements with attached data? – Apr 28 '11 at 16:03
You can see how data is removed by looking at the source code. At first glance, it doesn't look like it should have any memory leak. Source: https://github.com/jquery/jquery/blob/master/src/data.js#L114 – KushalP Apr 28 '11 at 16:07
The unique keys themselves are stored as part of a hash table. The hash table is the the `$.cache` variable. `$.cache` stores (key, value) pairs of data together. They're not in a separate structure. – KushalP Apr 28 '11 at 16:09
@KushalP: Where are the unique keys stored? The actual element looks the same in Chrome and FF – qwertymk Apr 28 '11 at 16:11
The element should not differ between browsers as it's jQuery specific. In the above linked (related) question, there's a good demonstration on how to obtain the (key, value) pairs. Link: http://jsfiddle.net/CnET9/ – KushalP Apr 28 '11 at 16:15
@KushalP: yes but given the element, how would I be able to get it's `data()` value without a `data()` call? – qwertymk Apr 28 '11 at 16:18
@qwertymnk I don't know how you'd do that. If `$.cache()` exists in the DOM then jQuery is available. If you know the element and know that it had been added to `$.cache` using `$.data()` in the first place... then you can just do `$.data(key)` to grab it's value. For more info, see: http://api.jquery.com/data/ – KushalP Apr 28 '11 at 16:27
@KushalP: Where is the `key` stored though? How does jQuery know where to look in the `$.cache` if I give it an element? – qwertymk Apr 28 '11 at 18:35
@qwertymk The links that I've posted to both the API docs and the jQuery source code (github) explain this. It's around 50 lines of code to look at to understand. – KushalP Apr 28 '11 at 20:04

score 10 · Answer 2 · answered Apr 28 '11 at 17:07

jQuery gets or sets data in 3 different ways for 3 different type of object.

For DOM element, jQuery first get a unique id, than create a custom property for element called expando:

var counter = 0;
function uid() {
    // only example
    return 'jQuery' + counter;
}
function getExpando(element) {
    var expando = element['jQueryExpando'];
    // for those without expando, create one
    if (!expando) {
        expando = element['jQueryExpando'] = uid();
    }
    return expando;
}

On the other hand, jQuery has a $.cache object which stores data map for each element, jQuery searches $.cache by expando and get a data map for certain element, getting or setting data in that map:

function data(element, name, value) {
    var expando = getExpando(element);
    var map = $.cache[expando];

    // get data
    if (value === undefined) {
        return map && map[name];
    }
    // set data
    else {
        // for those without any data, create a pure map
        if (!map) {
            map = $.cache[expando] = {};
        }
        map[name] = value;
        return value;
    }
}

For custom object(which is not DOM element or window object), jQuery directly set or get a property from that object by name:

function data(obj, name, value) {
    if (!obj) {
        return obj;
    }
    // get data
    if (value === undefined) {
        return obj[name];
    }
    // set data
    else {
        obj[name] = value;
        return value;
    }
}

At last, for the special window object, jQuery has a special windowData variable in closure to store data for window:

function data(obj, name, value) {
    if ($.isWindow(obj)) {
        obj = windowData;
    }
    // same as data for custom object
}

For more information: 1. jQuery can get data from HTML5 data-* attribute, but will never set data back to attribute. 2. jQuery fires an *datachange* event when setting data to object, but it's out of the topic. — otakustay, Apr 28 '11 at 17:08

score 10 · Answer 3 · answered May 04 '11 at 19:26

10

Ok I figured it out.

jQuery.expando contains a string that's appended to each element which is jQuery + new Date()

HTMLElement[jQuery.expando] contains the key to that element's data

jQuery.cache[HTMLElement[$.expando]] contains the data on the element

Here is a demo

answered May 04 '11 at 19:26

qwertymk

34,200
28
121
184

This is not going to work if data is set under a namespace, e.g. "foo.bar". Use `jQuery.data(HTMLElement)` to handle all the edge cases when retrieving the data. – Gajus Oct 19 '14 at 18:53

Where is jQuery.data() stored?

3 Answers3

Here is a demo

Linked