0

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

2
  • a page that method search for jquery what do you mean with that? The official documentation api.jquery.com ? Commented Jun 28, 2010 at 20:17
  • @Felix nah... someone created a separate site that allows you to type in the name of a method, and then it will show you the source code inside jquery for that method. Commented Jun 28, 2010 at 20:18

3 Answers 3

1

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

Sign up to request clarification or add additional context in comments.

Comments

1

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 ];
        }
    }

1 Comment

Thanks. This is what I was looking for. Do you know anything about the efficiency of data, and jquery's cache? How does jquery cache work?
0

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.