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?

Hemeralopia

Possible duplicate of https://mcmap.net/q/411020/-how-does-jquery-data-work – Waggle

Answer 1

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.

Jupiter

+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? – Mcclimans

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: github.com/jquery/jquery/blob/master/src/data.js#L114 – Jupiter

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. – Jupiter

@KushalP: Where are the unique keys stored? The actual element looks the same in Chrome and FF – Hemeralopia

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: jsfiddle.net/CnET9 – Jupiter

@KushalP: yes but given the element, how would I be able to get it's data() value without a data() call? – Hemeralopia

@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: api.jquery.com/data – Jupiter

@KushalP: Where is the key stored though? How does jQuery know where to look in the $.cache if I give it an element? – Hemeralopia

@Hemeralopia 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. – Jupiter

Answer 2

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
}

Tyus

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. – Tyus

Answer 3

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

Hemeralopia

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. – Gabe