Drupal JavaScript settings versus jQuery.data()

They're not used for the same thing...

jQuery.data() is used for storing data specific to a DOM element.

Store arbitrary data associated with the specified element and/or return the value that was set.

The Drupal.settings object is for storing global settings specific to the enclosing page build. It's essentially used to pass data from PHP to JavaScript, not to pass/store data within a a client-side page view.

...Drupal's global storage of JavaScript settings. Per-page settings are required by some modules to function properly.

If you want to store data related to a particular DOM element, against that DOM element, then use the jQuery.data() method.

If you want to pass global page settings from PHP to Javascript, use drupal_add_js() with the 'setting' type (which results in the data being added to Drupal.settings in the front end).

You may well find yourself in the position where you're looping through items in Drupal.settings in order to save the same data against the appropriate DOM element - that's perfectly normal (in my experience anyway, a more worldly JS ninja might be able to correct me there though).

Personally, I used Drupal.settings as a read-only object for communicating settings and configuration information from PHP to JS. Runtime state isn't appropriate here.

jQuery.data() should only really be used to pull out data attributes that you have set via PHP, and for setting data that is specific to that element-only.

Runtime logic and state should be stored in its own closure. I use a variant of the Javascript Module Pattern, which I have adapted for Drupal. Boilerplate looks like:

var FOO = (function(me, $, Drupal, undefined) {
    me.name = "FOO";

    // local properties

    var foo = null;
    var bar = null;

    // local functions

    function somethingAwesome () {
        console.log(me.name + '.' + arguments.callee.name + '()');
    }

    // global properties

    me.baz = null;

    // global functions

    me.somethingAwesomer () = function somethingAwesomer {
        console.log(me.name + '.' + arguments.callee.name + '()');
    };

    // Drupal

    function init (context, settings) {
        if (settings.foo) {
            console.log(me.name + '.' + arguments.callee.name + '()', $.fn.jquery);

            // do stuff
        }

        Drupal.behaviors[me.name] = undefined;
    };

    Drupal.behaviors[me.name] = {
        attach: init
    };

    return me;
}(FOO || {}, jQuery, Drupal));

I don't do a lot of true behaviors, though, hence making my initialization function a oneshot.