Globalized storage for jQuery using a document fragment instead of $(element).data();

jQuery.storage.cache.js

/*
 * Notes: Optimized for "set" operations
 * Performance test URL: http://jsperf.com/global-storage-vs-jquery
 */
(function($, unknown) {
    // Usage: Instead of $(elem).data('key'), you use $.storage.get('key') for retrieval.
    // Usage: Instead of $(elem).data('key', 'value'), you use $.storage.set('key', 'value') for set.
    $.storage = {
        get: function(key) {
            if (typeof $.storage.db == 'undefined') {
                $.storage.db = document.createDocumentFragment();
            }
            if (typeof $.storage.cache == 'undefined') {
                $.storage.cache = {};
            }
            
            $($.storage.db).data($.storage.cache);
            $.storage.cache = {};
            
            if (typeof key == 'undefined') {
                return $($.storage.db).data();
            } else {
                return $($.storage.db).data(key);
            }
        },
        set: function(key, value) {
            if (typeof $.storage.db == 'undefined') {
                $.storage.db = document.createDocumentFragment();
            }
            if (typeof $.storage.cache == 'undefined') {
                $.storage.cache = {};
            }

            if (typeof key == 'undefined' || typeof value == 'undefined') {
                return undefined;
            } else {
                $.storage.cache[key] = value;
                return value;
            }
        }
    };
}(jQuery));

jQuery.storage.no-cache.js

/*
 * Notes: Optimized for "get" operations
 * Performance test URL: http://jsperf.com/global-storage-vs-jquery-w-o-cache
 */
(function( $, unknown ) {
// Usage: Instead of $(elem).data('key'), you use $.storage.get('key') for retrieval.
// Usage: Instead of $(elem).data('key', 'value'), you use $.storage.set('key', 'value') for set.
    $.storage = {
        get: function(key) {
            if (typeof $.storage.db == 'undefined') {
                $.storage.db = document.createDocumentFragment();
            }
            
            if (typeof key == 'undefined'){
                return $($.storage.db).data();
            } else {
                return $($.storage.db).data(key);
            }
        },
        set: function(key, value) {
            if (typeof $.storage.db == 'undefined') {
                $.storage.db = document.createDocumentFragment();
            }
            
            if (typeof key == 'undefined' || typeof value == 'undefined') {
               return undefined;
            } else {
               return $($.storage.db).data(key, value);
            }
        }
    };
}
(jQuery));

Is there are reason why not to just do:

var data = {};

data.whatever = { something: 'foobar' };

Nope. No reason whatsoever, and I actually do that for a lot of "vanilla" applications. Just in some cases where I absolutely have to use the jQuery $(elem).data(), or at least just $.data(), I prefer using it like this, instead of binding props to just any DOM element.

$(this).data() is actually very useful, but only when building a plugin that requires you to save the state against the jQuery function itself-- outside of that, I have almost no need to ever use $.data().

Docs recommend using it to avoid circular references and memory leaks, but whenever I store data for transport, I always scope it properly and expose getter's and setter's if it is to be widgetized. $.data() is really only supposed to be used when your app is SO far flung with jQuery, that it becomes the only "safe" way to protect arbitrary data. I've been on board w/projects like this, and abhor utilizing $.data() since it traverses the DOM to get your key:vals. window and document are pretty cudgy to utilize as containers since they can still be traversed, but a doc fragment just fires off object selection, and allows you to save your data against it.

There's always better ways to do things, I've just found that if I absolutely have to use this helper, this is how I prefer to do it.

Updated to cached vs non cached.

Cached = key+val in set command, writes to .data() only on get.

• Optimized for .set() operations

Non cached = writes to .data() directly in set commands.

• Optimized for .get() operations