Neste post, vou explicar as diferentes tecnologias de armazenamento em navegadores HTML5, para gerar uma aplicação web capaz de funcionar offline com as tecnologias padrão disponíveis.

sessionStorage
#

É um objeto que armazena informações na aba atual no domínio atual. Mas ele sobrevive quando a página atualiza ou quando a aba é restaurada. Uma nova janela de aba criará um novo SessionStorage.

// Almacena la información en sessionStorage
sessionStorage.setItem('key', 'value');
// Obtiene la informacion almacenada desde sessionStorage
var data = sessionStorage.getItem('key');

localArmazenamento
#

Fornece acesso a armazenamento de longo prazo por domínio.

// Almacena la información en localStorage
localStorage.setItem('key', 'value');
// Obtiene la informacion almacenada desde localStorage
var data = localStorage.getItem('key');

Cache de aplicação (AppCache)
#

É um mecanismo para que aplicações web em cache possam trabalhar offline com elas. Por meio de um arquivo manifesto, podemos especificar quais recursos estarão disponíveis offline. Isso também reduz a carga no servidor e acelera a navegação.

Referências
#

https://developer.mozilla.org/en-US/docs/Web/HTML/Using_the_application_cache https://html.spec.whatwg.org/multipage/browsers.html#appcache

Banco de dados indexado
#

IndexedDB é uma API para armazenamento do lado do cliente de uma quantidade significativa de dados estruturados. Maior que sessionStorage, LocalStorage ou globalStorage

Conclusão
#

É a tecnologia certa para grandes quantidades de dados

Saiba mais
#

https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API

API de arquivos
#

Isso nos permite trabalhar com uma estrutura de arquivos, salvá-los e lê-los diretamente no disco. Pode ser útil em situações como, por exemplo, se quisermos simular o upload de um arquivo no nosso app enquanto estamos offline, podemos salvá-lo no disco e sincronizá-lo depois, mas para o carregamento da página, como sabemos, gravações em disco têm um custo alto, o que devemos tentar evitar.

Tanto no IE quanto no Chrome, é necessário permissão do usuário para ser usado. O limite de armazenamento é para espaço livre em disco.

Mais informações e exemplos
#

http://www.html5rocks.com/es/tutorials/file/filesystem/

ARMAZENAMENTO DISPONÍVEL
#

BrowserssessionStoragelocalStorageFileAPI Cache de Aplicação (AppCache)Indexado DbInternet Explorer 114864 k4864 kNão limitado500MB/ Ilimitado (Perguntando ao usuário)250MB (configurável até 1GB por usuário)Google Chrome 445101 k5101 kNão limitadoIlimitado *1300 Mb (Pelo menos)Microsoft Edge 1.04864 k4864 kNão limitado500MB/ Ilimitado (Perguntando ao usuário)250MB (configurável até 1GB pelo usuário)Firefox 405120 k5120 kNão limitado250MB ‘3Sem limite (permissão do usuário) blobs >50Mb) As unidades são o número de caracteres (bytes) Test usados localmente e sessionStorage: http://dev-test.nemikor.com/web-storage/support-test/

Compatibilidade de navegadores
#

FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)localStorage43.5810.504sessionStorage52810.504Cache de aplicação4.03.510.010.64.0IndexedDb2310IE10157.1FileApi313110257.1

Neste caso, focamos em navegadores desktop, mas nos sites acima poderíamos obter informações sobre navegadores móveis

Exemplos
#

Aqui podemos ver alguns exemplos dessas tecnologias juntos

https://hacks.mozilla.org/2010/01/offline-web-applications/

Saiba mais
#

https://developer.mozilla.org/es/docs/DOM/Almacenamiento

Sem Padrões / Deprecadas (Não recomendado)
#

globalStorage
#

Este é um objeto global que mantém múltiplas áreas de armazenamento privadas que podem ser usadas para armazenar dados por um longo período de tempo.

webSQL
#

É uma tecnologia semelhante ao IndexedDB, mas foi descontinuada em 18 de novembro de 2010 http://www.w3.org/TR/webdatabase/

userDataBehavior
#

Ele permitia armazenamento muito limitado, é compatível apenas com IE e está obsoleto do IE10

Até a próxima!

Visão geral das tecnologias de armazenamento em navegadores

sessionStorage
#

localArmazenamento
#