Cache do lado do cliente e do servidor com Javascript

O cache é uma abordagem muito comum no lado do servidor, mas não tão bem explorada no lado do cliente (sem falar sobre a rede ou o cache nativo do navegador aqui …)

Portanto, uma abordagem muito comum tornou-se para solicitações de cache, para que você não faça isso duas vezes, você pode até mesmo encontrá-la na página de exemplos jQuery:

var cachedScriptPromises = {};
$.cachedGetScript = function( url, callback ) {
    if ( !cachedScriptPromises[ url ] ) {
        cachedScriptPromises[ url ] = $.Deferred(function( defer ) {
            $.getScript( url ).then( defer.resolve, defer.reject );
        }).promise();
    }
    return cachedScriptPromises[ url ].done( callback );
};

É …. ok … mas não dá a você nenhum controle sobre expiração, invalidação ou persistência.

Com essa ideia em mente, eu escrevo uma biblioteca de cache baseada em Promise chamada stash.js (após a biblioteca php ), que permite que você faça algumas coisas como:

// reload the feed every 15 minutes
function getFeed() {
    return stash.get('feed').catch(function () {
        // cache not available
        return actuallyReachServer().then(function (serverData) {
            this.set(serverData, 15 * 60);
            return serverData;
        });
    });
}

E depois:

getFeed().then(function (feedData) {
    document.querySelector('.feed').innerHTML = feedData;
}).done();

E é claro que você poderia usar exatamente a mesma abordagem no servidor (mas alcançando o banco de dados em vez do servidor …).

Até agora, o Stash tem 4 drivers: Ephemeral(cache na memória) LocalStorage, Redise Memcached. Também é multicamadas, você pode usar qualquer combinação de drivers em qualquer ordem que desejar para ler de cima para baixo e escrever de baixo para cima. (O driver IndexedDB já está a caminho …)

Stash também vem com estratégias 4 de invalidação: NONE, OLD, PRECOMPUTEe VALUE.

Se você estiver interessado, há uma demonstração ao vivo muito simples que consome a API do Facebook disponível aqui e você pode encontrar ainda mais na página do github do projeto