dataset vs jquery.data() (v18)

Revision 18 of this benchmark created on

Description

element.dataset actually sets/gets the attribute. jQuery.data() stores the data internally (and has cross-browser support). jQuery's higher level, chainable .data() method can read data-* attributes but not set them--it stores the data to the selector but doesn't update the DOM.

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="test"></div>

Setup

function datasetDemo() {
        var testElem = document.querySelector('#test'); // native
        testElem.dataset.foo = 'bar'; //set
        return testElem.dataset.foo;  //get
    }
    function $dataDemo() {// lower level (internal) jQuery method
        //var $testElem = $('#test'); // jQuery if needed but...
        //var $testElem = document.querySelector('#test'); // native works here
    var $testElem = document.getElementById('test'); // native works here
        $.data($testElem, 'foo', 'bar'); //set
        return $.data($testElem, 'foo'); //get
    }
    function chain$dataDemo() {// higher level (chainable) jQuery method
         var $testElem = $('#test'); // jQuery
        $testElem.data('foo', 'bar'); //set
        return $testElem.data('foo'); //get
    }
    function $attrDemo() {// jQuery .attr() method
         var $testElem = $('#test'); // jQuery
        $testElem.attr('data-foo', 'bar'); //set
        return $testElem.attr('data-foo'); //get
    }
    function nativeAttrDemo() {// getAttribute/setAttribute
        var testElem = document.querySelector('#test'); // native
        testElem.setAttribute('data-foo', 'bar'); //set
        return testElem.getAttribute('data-foo'); //get
    }

Test runner

Ready to run.

Testing in
TestOps/sec
datasetDemo()
datasetDemo();
ready
$dataDemo()
$dataDemo();
ready
chainable .data()
chain$dataDemo()
ready
$attrDemo()
$attrDemo();
ready
setAttribute/ getAttribute
nativeAttrDemo();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.