HTML5 LocalStorage para ativos (folhas de estilo, javascript, imagens etc)
-
22-09-2019 - |
Pergunta
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?
Solução
Eu acho que neste caso você deve considerar o cache offline:
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.
Outras dicas
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.