jQuery Forum

https://api.jquery.com/jquery.data/

Please document .data/$.data caching

in Developing jQuery Core • 1 year ago

Neither the $.data nor the .data() documentation mention the cache system.

I was retrieving objects using .data, and then setting a value in the object.

Subsequent calls to .data didn't return the original object but the modified version.

I had no idea there was a cache, it was very confusing.

https://api.jquery.com/data/

Replies(18)

dave.meth..

Re: Please document .data/$.data caching

1 year ago

The data object is persistent. That's not a cache, it's the data object. If you set a value in the object and later ask for the object, the value should still be there.

Or maybe I'm misunderstanding what you mean. Can you post an example from jsbin.com or jsfiddle.net that demonstrates the unexpected behavior you encountered?

jQuery.extend() | jQuery API Documentation

Re: Please document .data/$.data caching

1 year ago

If you want to store a "copy" of the object that you are putting in .data you can always clone it with $.extend.

$(this).data("obj",$.extend(true, {}, obj));

JΛ̊KE

https://jsfiddle.net/nktattn0/

Re: Please document .data/$.data caching

1 year ago

Here's a fiddle:

http://api.jquery.com/data/#data-html5

Re: Please document .data/$.data caching

1 year ago

Changing you local variable does not change the stored data. If you want to change the stored data, call .data() with two parameters.

While you didn't ask... nor does changing the stored data (using .data() with two parameters) change the attribute in the DOM.

The DOM attribute INITIALIZES the internal data store for .data() on first reference.

I do agree perhaps it could use more clear documentation. Maybe it should be made clear that .data() doesn't pass back a reference to it's internal data store, but (apparently) a reference to a new object with a copy of the internal data.

The documentation is ambiguous, as it refers to returning a "value". But Javascript returns by reference, other than simple variables.

dave.meth..

Re: Please document .data/$.data caching

1 year ago

What documentation is missing?

Re: Please document .data/$.data caching

1 year ago

What seems missing is a statement that .data() returns a (reference to a) COPY of the data (when an object), rather than a direct reference to the object.

OP seems left with the impression that changing his variable should change the internal data. (Which it doesn't.)

Documentation does state it returns a "value", but that's really not quite right, as Javascript only returns values for simple variables, otherwise, returns a reference (for object).

I haven't look at the code, but must surmise from behavior that when the data is an object, it returns a reference to a copy.

Re: Please document .data/$.data caching

1 year ago

The problem is .data is returning a reference to the cache. I can modify the cache directly after calling .data once without invoking .data() again.

Subsequent calls to .data() show the side effects of changes to the cache even though the original operation was a read operation. By giving me direct access to the data object I mutate an object which I assumed I was only given a copy of.

There's no mention of the cache system in the documentation, so it really threw me for a loop.

dave.meth..

Re: Please document .data/$.data caching

1 year ago

I still have no idea what the problem is. There is no "cache system", there is a "data object" that you get each time that you ask for it. The demo behavior looks totally correct to me. You assigned a value to a property and it is still there when you check for it. Why would the assignment statement _json.is_persisting = false fail to work?

Re: Please document .data/$.data caching

1 year ago

Because I'm supposed to over write it with a subsequent call to .data(). Instead I get a reference to the dirty object. There's nothing in the documentation that would lead you to expect this behavior.

Re: Re: Please document .data/$.data caching

1 year ago

Also, why are you so insistent that there's no cache. I have a source of data, the DOM. I have something that makes a copy of this data. The copy persists and does not allow subsequent read to reach the original data source. That's the definition of a cache.

Re: Please document .data/$.data caching

1 year ago

A cache stores an identical copy. But, .data stores the original. If you want to store a copy, you clone the original.

It’s exactly the same as

var x={foo:22};
var y=x; // the original.
x.foo=23;
alert(y.foo); // 23

Vs.

var x={foo:22};
var y=$.extend(true, {}, x) // an identical copy
x.foo=23;
alert(y.foo); // 22

JΛ̊KE

Re: Please document .data/$.data caching

1 year ago

Fine. Show me where the documentation makes it clear that you can't expect the DOM to read from more than once.

Re: Re: Please document .data/$.data caching

1 year ago

I agree with you. The documentation assumes the reader knows how objects work in javaScript. I can see how you could easily get confused!

JΛ̊KE

Re: Please document .data/$.data caching

1 year ago

OK, I was wrong... it returns a reference to the internal data. So, you CAN change the data by changing your variable.

Sorry, I was struggling to understand what the Fiddle was trying to prove, and mis-read it. I thought OP was complaining that changing his variable did not change the internal data.

It is not a cache, in that changes to the attribute will NOT change the internal data associated with the node. It is simply "data associated with a node", that happens to be INITIALIZED from the attribute value.

Re: Please document .data/$.data caching

1 year ago

The data- attributes are pulled in the first time the data property is accessed and then are no longer accessed or mutated (all data values are then stored internally in jQuery).

Re: Please document .data/$.data caching

1 year ago

//Let's read
var b = $('#derp').data();
//Let's write
$('#derp').data('using_api',true);
//Let's bypass the API entirely
b.using_api = false;
alert('yay!');

Re: Re: Please document .data/$.data caching

1 year ago

And $('#derp').data('using_api') is false.

JΛ̊KE