HTML5 LocalStorage para ativos (folhas de estilo, javascript, imagens etc)

Question

Para salvar o tempo de download do cliente e o uso da rede, é possível usar o recurso LocalStorage do HTML5 para armazenar o conteúdo de folhas de estilo vinculadas, arquivos JavaScript e dados binários (por exemplo, imagens), em vez de atingir o servidor a cada vez?

Isso seria apenas complicar as coisas - já que presumo que você teria que adicionar o ativo vinculado via JavaScript, em vez de apenas um script ou link elemento, quebrando a página para aqueles sem JavaScript habilitados)? A menos que você possa analisar o conteúdo (usando HEAD Solicitado para verificar a última data modificada e outros cabeçalhos) antes que o navegador o faça o download.

Ou melhor apenas para ficar 304 Not Modified e eTag cabeçalhos?

Answer 1

Eu acho que neste caso você deve considerar o cache offline:

• https://developer.mozilla.org/en/offline_resources_in_firefox#specifying_a_cache_manifest

Você também pode armazenar dados de entrada do usuário no LocalStorage ou SessionStorage:

• https://developer.mozilla.org/en/dom/storage#sessionStorage
• https://developer.mozilla.org/en/dom/storage#localStorage

Não use o GlobalStorage (não um padrão).

Eu escrevi um artigo sobre offline, consulte: http://hacks.mozilla.org/2010/01/offline-web-applications/

É sobre offline, mas esse mecanismo pode ser usado para aumentar seu aplicativo da web.

Answer 2

Você pode codificar seus dados de imagem/binário e armazená -los como uma string no LocalSorage, usando URLs BASE64 não funciona em alguns navegadores, portanto não é uma solução perfeita.

CSS e JS ficariam bem, você poderia escrevê -los na página ou usar um URL base64 também.

Eu não me preocuparia em fazer isso quebrando o site para usuários não JS, assim como o JS é desativado, você não pode acessar o LocalStorage.