css.js

/*
 css.js: CSS Permacache 2.2

 This script handles only tags of these types.
 <style class="permacache" type="text/css" data-src="(e.g. js.css)"></style>
 <link class="permacache" href="(e.g. js.css)" /> (place AFTER this script!)

 == Requirements ==
 JS
 jQuery 1.4+

 == Fallback ==
 If link tags are used, then it is its own fallback.

 == Invalidating Cache ==
 Two methods:
 - put a 'data-expires' attribute in the tag, value being age in seconds.
 - if pubsub.js (https://gist.github.com/4012640) is also on the page,
   you can call $.pubsub('invalidateCookies') to invalidate the cache.

 */

(function (w, $) {
    "use strict";
    var appendage = ':set-time',
        expired = function (key, maxAge) {
            var setDate = parseInt(ls.getItem(key + appendage) || "0");
            return !setDate? true : (now() < setDate + maxAge * msMultiplier);
        },
        head = $('head'),
        ls = w.localStorage || {},
        log = (w.console && w.console.log) ? w.console.log : function () {},
        msMultiplier = 1000,  // factor from ms to s
        now = function () {
            return (new Date()).getTime();
        },
        cacheCSS = function (key, css) {
            try {
                if (css) {  // set mode
                    ls.setItem(key, css);
                    ls.setItem(key + appendage, now().toString());
                    log('caching CSS ' + key);
                }
                return ls.getItem(key) || ''; // else: get mode
            } catch (err) {
                log(err);  // poop... you're full of it
            }
        },
        loadCSS = function ($domEl, contents) {
            // rip it off the dom, put it back again (refreshes things)
            $domEl.remove().appendTo(head).html(contents);
        },
        invalidateAll = function () {
            // removes all css' set times, so the cookie will always expire.
            for (var i in ls) {
                if (ls.hasOwnProperty(i) && i.substr(-9) === appendage) {
                    log('invalidating CSS ' + i);
                    ls.removeItem(ls[i]);
                }
            }
        };

    $('head>.permacache').each(function () {
        // .permacache can be on both links and styles
        var tag = $(this),
            src = tag.data('src') ||  // style would use src
                  tag.prop('href') || // link would use href
                  '',                 // idiots would use neither
            expiry = parseInt(tag.data('expires') || "0");

        // a style with no data-src is like saying
        // you want nothing done
        if (src) {
            log(expired(src, expiry));
            if (cacheCSS(src) && !expired(src, expiry)) {  // yay
                log('loading cached CSS ' + src);
                loadCSS(tag, cacheCSS(src));
            } else {
                $.ajax(src, {
                    'success': function (data) {
                        cacheCSS(src, data);  // store
                        loadCSS(tag, data);
                    },
                    'error': function () {
                        // origin, 404, whatever. fallback
                        $('<link />', {
                            'type': 'text/css',
                            'rel': 'stylesheet',
                            'href': src
                        }).appendTo(head);
                    }
                });
            }
        }
    });

    $.invalidateCookies = invalidateAll;  // crude register module
})(window, jQuery);