Das Dokument beschreibt die Verwendung der jQuery .data() Methode und der HTML5 data Attribute zur Speicherung von Daten in DOM-Elementen. Es erklärt, wie Werte gespeichert, abgerufen und entfernt werden können sowie die Unterschiede zwischen jQuery und nativem JavaScript beim Zugriff auf diese Daten. Zudem werden Tipps zur Verwendung von data Attributen und zur Beachtung von Datentypen gegeben.

1. jQuery .data()
und HTML5 data Attribute

2. Michael Kühnel
•
Macht Internet seit Netscape 4.7
•
Frontend Developer bei der SMA Solar Technology
AG
•
Twitter: @mkuehnel
•
Website: www.michael-kuehnel.de

3. Was ist Query .data()?
•
.data() und .removeData() – seit jQuery 1.2.3
•
hat nichts mit HTML5 zu tun
•
Key-Value-Speicher an DOM Elementen

4. Nutzung kurz erklärt
$('#elem').data( 'foo', 52 );
$('#elem').data( 'bar', { myType: 'test', count: 40 } );
$('#elem').data( { baz: [ 1, 2, 3 ] } );
$('#elem').data( 'foo' ); // 52
$('#elem').data(); // {
foo: 52,
bar: { myType: 'test', count: 40 },
baz: [ 1, 2, 3 ]
}
$('#elem').removeData('foo');
$('#elem').removeData();

5. Für was kann man das
gebrauchen?
Nutzereingaben zwischenspeichern, Status von
Elementen speichern, IDs aus Datenbanken … usw.

6. Was sind HTML5 data
Attribute?
Custom Attribute in HTML-Markup (data-*)
<ul>
<li data-foo="52">Element</li>
<li data-foo-bar="{ myType: 'test', count: 40 }">
Element
</li>
</ul>
Empfehlung: Hyphens wegen Namespacing (datamodulname-key).

7. Browsersupport
HTML-Markup:!
•
Jeder Browser der den HTML5 Doctype versteht
Natives JavaScript:!
•
Zugriff über element.dataset property ab IE11
•
Zugriff über element.getAttribute ab IE5.5

8. Data Attribute und CSS Attribut
Selektoren
Nur lowercase und Bindestriche verwenden
#element[data-fooBar="25"] {
background-position: -16px 0;
}
💩
#element[data-foo-bar="25"],
#element[data-foobar="25"] {
background-position: -16px 0;
}
👍

9. jQuery 💖 HTML5 data-*
Data Attribute lesen
HTML-Markup:
<div id="element" data-foo-bar="25">Element</div>
JavaScript:
var data = $('#element').data('fooBar');
Siehe: http://api.jquery.com/data/#data-html5

10. Datentypen-Konvertierung
mit .data()
HTML-Markup:
<div id="element" data-foo-bar="25">Element</div>
JavaScript:
// 25 -> string
var data = $('#element').attr('data-foo-bar');
!
// 25 -> number
var data = $('#element').data('fooBar');
.data() »kennt« diese Datentypen:
•
booleans, strings, numbers, objects, arrays, null

11. Beachtenswert I
.data() liest den Value des HTML5 data Attributes nur
beim ersten Aufruf auf dem Element!
HTML-Markup:
<div id="element" data-foo-bar="25">Element</div>
JavaScript:
$('#element').data('fooBar'); // -> 25
$('#element').attr('data-foo-bar', '50');
$('#element').data('fooBar'); // -> 25
Lösung:!
Entweder mit .attr() lesen oder mit .data() setzen.

12. Beachtenswert II
Zu viel Magie?
HTML-Markup:
<div data-tweet-id="4238802317582131"></div>
<div data-tweet-id="423880231758213120"></div>
JavaScript:
$('div').each(function() {
console.log(typeof($(this).data('tweetId')));
});
// --> number
// --> string // WTF?!?
Grund: Der Maximalwert einer JavaScript Zahl ist 253
– also 9007199254740992

13. Fragen?!
💭
Twitter: @mkuehnel
E-Mail: mail@michael-kuehnel.de

14. Links
•
jQuery data im Browser sichtbar machen
•
Chrome: https://chrome.google.com/webstore/
detail/jquery-debugger/
dbhhnnnpaeobfddmlalhnehgclcmjimi
•
Firebug: http://firequery.binaryage.com/

15. Quellen
•
http://api.jquery.com/data/
•
http://api.jquery.com/removeData/
•
http://www.youtube.com/watch?v=9anCUpoiFVw&feature=youtu.be&t=19m46s
•
http://www.learningjquery.com/2011/09/using-jquerys-data-apis/
•
http://html5doctor.com/html5-custom-data-attributes/
•
http://blog.jquery.com/2008/02/07/jquery-1-2-3-released/
•
http://caniuse.com/#feat=dataset
•
http://thinkco.de/jquery-data-considered-potentially-harmful/
•
http://lookfirst.com/2011/12/dont-use-jquery-data-method-use-attr.html