jQuery Data Function

Question

How does jQuery's data function work? Is it more efficient than giving the dom elements a class or attribute? Where is the data stored?

PS: I once saw a link to a page that does method search for jquery, but I lost it

Answer 1

There are some rules you should be aware of before using this!

ADDING

Adding variables using the object returned from $('.selector').data() works because the data object passes by reference, so anywhere you add a property, it gets added. If you call data() on another element, it gets changed. It is what it is what it is...

Adding an object places a object inside of the data object, as well as "extends the data previously stored with that element." - http://api.jquery.com/data/#entry-longdesc

That means that adding an obj to dataObj becomes

dataObj === { /*previous data*/, obj : { } }

Adding an array does not extend the data previously stored, but doesn't behave the same as a simple value either...

USING

If you have simple values stored, you can place them into variables and do what you want with them without changing the data object.

however

if you are using an object or array to store data on an element, beware!

Just because you store it to a variable does not mean you are not changing data value. Just because you pass it to a function does not mean you are not changing data values!

It is what it is what it is.. unless it's simple.. then it's just a copy. :p

var data             = $("#id").data();  // Get a reference to the data object 
data.r_redirect      = "index.php";      // Add a string value
data.num             = 0;                // Add a integer value
data.arr             = [0,1,2];          // Add an array
data.obj             = { a : "b" };      // Add an object

                                         // but here is where the fun starts! 

var r_redirectString = data.r_redirect;  // returns "index.php", as expected.. cool
r_redirectString     = "changed"         // change the value and the compare :
data.r_redirect      == r_redirectString // returns false, the values are different

var oArr             = data.arr;         // Now lets copy this array
oArr.push(3);                            // and modify it.
data.arr            == oArr              // should be false? Nope. returns true.
                                         // arrays are passed by reference.
                                         // but..

var oObj             = data.obj          // what about objects?       
oObj["key"]          = "value";          // modify the variable and
data.obj["key"]     == oObj["key"]       // it returns true, too!

So, resources..

What's the best way to store multiple values for jQuery's $.data()? https://stackoverflow.com/a/5759883/1257652

Answer 2

I believe that what you are looking for is James Padolsey's jQuery SourceCode viewer

And this is the actual code from jQuery:

// The following elements throw uncatchable exceptions if you
    // attempt to add expando properties to them.
    noData: {
        "embed": true,
        "object": true,
        "applet": true
    },

    data: function( elem, name, data ) {
        if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) {
            return;
        }

        elem = elem == window ?
            windowData :
            elem;

        var id = elem[ expando ], cache = jQuery.cache, thisCache;

        if ( !id && typeof name === "string" && data === undefined ) {
            return null;
        }

        // Compute a unique ID for the element
        if ( !id ) { 
            id = ++uuid;
        }

        // Avoid generating a new cache unless none exists and we
        // want to manipulate it.
        if ( typeof name === "object" ) {
            elem[ expando ] = id;
            thisCache = cache[ id ] = jQuery.extend(true, {}, name);

        } else if ( !cache[ id ] ) {
            elem[ expando ] = id;
            cache[ id ] = {};
        }

        thisCache = cache[ id ];

        // Prevent overriding the named cache with undefined values
        if ( data !== undefined ) {
            thisCache[ name ] = data;
        }

        return typeof name === "string" ? thisCache[ name ] : thisCache;
    },

    removeData: function( elem, name ) {
        if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) {
            return;
        }

        elem = elem == window ?
            windowData :
            elem;

        var id = elem[ expando ], cache = jQuery.cache, thisCache = cache[ id ];

        // If we want to remove a specific section of the element's data
        if ( name ) {
            if ( thisCache ) {
                // Remove the section of cache data
                delete thisCache[ name ];

                // If we've removed all the data, remove the element's cache
                if ( jQuery.isEmptyObject(thisCache) ) {
                    jQuery.removeData( elem );
                }
            }

        // Otherwise, we want to remove all of the element's data
        } else {
            if ( jQuery.support.deleteExpando ) {
                delete elem[ jQuery.expando ];

            } else if ( elem.removeAttribute ) {
                elem.removeAttribute( jQuery.expando );
            }

            // Completely remove the data cache
            delete cache[ id ];
        }
    }

Answer 3

See - http://api.jquery.com/data/