How does jQuery .data() work?

$("#sth").data("my key", "my value");

It goes into $.cache. jQuery generates an id to match the element with the cache entry. It then stores that id directly on the Html element, using the a key specific to the used jQuery instance. The key name used is stored in $.expando, which looks something like this: jQuery172015931390528314845.

$("#sth")[0][$.expando]
> 1
$.cache[1]
> Object
>   data: Object
>     my key: "my value"

Why not attach the data directly to the element?

Because of memory leaks in IE. When you use the jQuery remove() method the data associated with the element will always be garbage collected using $.clearData:

$("#sth").remove()
$.cache
>Object
>   ...nothing

jQuery 2.0 will drop support for IE < 9, so data will likely be stored directly on the element.

Using .data() with objects

When you call .data on an object $.cache isn't used:

myObj = {}
$.data(myObj,"my key","my value")
> "my value"
myObj
> Object
>   jQuery17208736159270629287: Object
>      data: Object
>        my key: "my value"
>        toJSON: function () {}

Also note the toJSON method: libraries like JSON-js will not store display data that was added to an object using $.data.

Two more things

1) jQuery will try to camelCase keys if no value is found. So you can use "my-key" to fetch "myKey". (I don't see any reason to ever use this. It looks like it would only add confusion, maybe a legacy thing?)
2) jQuery uses .data("events") and internally, so you can fetch event handlers like this:

$("#sth").click(function(){console.log(arguments)})
$("#sth").data("events")
> Object
>   click: Array[1]
>     0: Object
>       handler: function (){console.log(arguments)}
>       namespace: ""
>       origType: "click"

You can still use a "events" as a key name though and you can't overwrite its internal value because it's stored in $.cache[1].events rather than $.cache[1].data.

You may want to have a look at $.data yourself.