localStorage e indexedDB são usados para armazenamento offline de dados em HTML5. Quais são as principais diferenças e qual é preferível em que situações?
Eleitores próximos: Embora eu entenda completamente como isso parecia "principalmente baseado em opiniões" (o "vs" na versão original não ajudou), as duas tecnologias são distintamente diferentes e há razões objetivas para escolher uma sobre a outra. user221287 fazer uma pesquisa prévia mínima no tópico da pergunta e obter um entendimento básico dos conceitos envolvidos antes de você perguntar, provavelmente o salvará de votos negativos e votos estreitos no futuro.
yannis
Você pode testar o desempenho entre diferentes opções de armazenamento e entre os navegadores aqui: nolanlawson.github.io/database-comparison (créditos para Nolan Lawson)
Lucas Basquerotto
Respostas:
121
Na superfície, as duas tecnologias podem parecer diretamente comparáveis; no entanto, se você passar algum tempo com elas, logo perceberá que não. Eles foram projetados para atingir um objetivo semelhante, o armazenamento do lado do cliente, mas abordam a tarefa em questão de perspectivas significativamente diferentes e funcionam melhor com diferentes quantidades de dados.
localStorage, ou mais precisamente Web Storage , foi projetado para quantidades menores de dados. É essencialmente uma cadeia de caracteres - apenas armazenamento de valor-chave , com uma API síncrona simplista . Essa última parte é a chave. Embora não haja nada na especificação que proíba um armazenamento DOM assíncrono, atualmente todas as implementações são síncronas (ou seja, solicitações de bloqueio). Mesmo que você não se importe em usar um armazenamento de valor-chave ingênuo para grandes quantidades de dados, seus clientes se importarão em esperar para sempre o carregamento do aplicativo.
O indexedDB , por outro lado, foi projetado para trabalhar com quantidades significativamente maiores de dados. Primeiro, em teoria, ele fornece uma API síncrona e assíncrona. Na prática, no entanto, todas as implementações atuais são assíncronas e as solicitações não impedem o carregamento da interface do usuário. Além disso, o indexedDB, como o nome revela, fornece índices . Você pode executar consultas rudimentares no banco de dados e buscar registros pesquisando as respectivas chaves em intervalos de chaves específicos . O indexedDB também suporta transações e fornece tipos simples (por exemplo, Data).
Nesse ponto, o indexedDB pode parecer a solução superior para todas as situações de todos os tempos. No entanto, há uma penalidade por todos os seus recursos: comparada ao armazenamento DOM, sua API é bastante complicada. O indexedDB assume uma familiaridade geral com os conceitos de banco de dados, enquanto que com o Web Storage você pode entrar. Se você já trabalhou com cookies, não terá problemas ao trabalhar com o Web Storage. Além disso, em geral, você precisará escrever mais código no indexedDB para obter exatamente o mesmo resultado que no Web Storage (e mais código = mais bugs). Além disso, a emulação de armazenamento na Web para navegadores que não o suportam é relativamente simples. Com o indexedDB, a tarefa não valeria a pena. Por fim, antes de mergulhar no indexedDB, você deve primeiro dar uma olhada na API de cotas .
No final do dia, você decide se você usa o Armazenamento na Web ou o indexedDB, ou ambos, em seu aplicativo. Um bom caso de uso para o Armazenamento na Web seria armazenar dados de sessão simples, por exemplo, o nome de um usuário e salvar algumas solicitações no banco de dados real. Os recursos adicionais do indexedDB, por outro lado, podem ajudá-lo a armazenar todos os dados necessários para que seu aplicativo funcione offline.
Também os trabalhadores de serviços pode usar indexedDB mas não localStorage
Fabich
10
@yannis resposta é excelente. Só quero adicionar algumas coisas.
Em algumas situações, como Service Workers, você não pode usar código de bloqueio, portanto, não pode usar localStorage e deve usar algo como indexedDB.
A API do indexedDB é complexa e tediosa (eu diria até horrível, YMMV). Existem várias bibliotecas "wrapper" para simplificar a API, sugiro fortemente que você as veja.
re não pode usar localStorage e código de bloqueio, você não pode agrupar o código de bloqueio com uma promessa e torná-lo sem bloqueio?
joedotnot 15/09
3
Para mim, descobri que posso armazenar blobs no IndexedDB, enquanto no localStorage posso armazenar apenas seqüências de caracteres. Isso significa que o IndexdDB é melhor para dados binários como imagens, áudio e vídeo. Sim, podemos armazenar imagens em base64 no localStorage, mas os blobs serão menores e mais rápidos, porque não precisamos decodificá-los.
Any objects supported by the structured clone algorithm can be stored:
All primitive types However not symbols
Boolean object
String object
Date
RegExp The lastIndex field is not preserved.
Blob
File
FileList
ArrayBuffer
ArrayBufferView This basically means all typed arrays like Int32Array etc.
ImageData
Array
Object This just includes plain objects (e.g. from object literals)
Map
Set
Respostas:
Na superfície, as duas tecnologias podem parecer diretamente comparáveis; no entanto, se você passar algum tempo com elas, logo perceberá que não. Eles foram projetados para atingir um objetivo semelhante, o armazenamento do lado do cliente, mas abordam a tarefa em questão de perspectivas significativamente diferentes e funcionam melhor com diferentes quantidades de dados.
localStorage, ou mais precisamente Web Storage , foi projetado para quantidades menores de dados. É essencialmente uma cadeia de caracteres - apenas armazenamento de valor-chave , com uma API síncrona simplista . Essa última parte é a chave. Embora não haja nada na especificação que proíba um armazenamento DOM assíncrono, atualmente todas as implementações são síncronas (ou seja, solicitações de bloqueio). Mesmo que você não se importe em usar um armazenamento de valor-chave ingênuo para grandes quantidades de dados, seus clientes se importarão em esperar para sempre o carregamento do aplicativo.
O indexedDB , por outro lado, foi projetado para trabalhar com quantidades significativamente maiores de dados. Primeiro, em teoria, ele fornece uma API síncrona e assíncrona. Na prática, no entanto, todas as implementações atuais são assíncronas e as solicitações não impedem o carregamento da interface do usuário. Além disso, o indexedDB, como o nome revela, fornece índices . Você pode executar consultas rudimentares no banco de dados e buscar registros pesquisando as respectivas chaves em intervalos de chaves específicos . O indexedDB também suporta transações e fornece tipos simples (por exemplo, Data).
Nesse ponto, o indexedDB pode parecer a solução superior para todas as situações de todos os tempos. No entanto, há uma penalidade por todos os seus recursos: comparada ao armazenamento DOM, sua API é bastante complicada. O indexedDB assume uma familiaridade geral com os conceitos de banco de dados, enquanto que com o Web Storage você pode entrar. Se você já trabalhou com cookies, não terá problemas ao trabalhar com o Web Storage. Além disso, em geral, você precisará escrever mais código no indexedDB para obter exatamente o mesmo resultado que no Web Storage (e mais código = mais bugs). Além disso, a emulação de armazenamento na Web para navegadores que não o suportam é relativamente simples. Com o indexedDB, a tarefa não valeria a pena. Por fim, antes de mergulhar no indexedDB, você deve primeiro dar uma olhada na API de cotas .
No final do dia, você decide se você usa o Armazenamento na Web ou o indexedDB, ou ambos, em seu aplicativo. Um bom caso de uso para o Armazenamento na Web seria armazenar dados de sessão simples, por exemplo, o nome de um usuário e salvar algumas solicitações no banco de dados real. Os recursos adicionais do indexedDB, por outro lado, podem ajudá-lo a armazenar todos os dados necessários para que seu aplicativo funcione offline.
fonte
@yannis resposta é excelente. Só quero adicionar algumas coisas.
Em algumas situações, como Service Workers, você não pode usar código de bloqueio, portanto, não pode usar localStorage e deve usar algo como indexedDB.
A API do indexedDB é complexa e tediosa (eu diria até horrível, YMMV). Existem várias bibliotecas "wrapper" para simplificar a API, sugiro fortemente que você as veja.
fonte
Para mim, descobri que posso armazenar blobs no IndexedDB, enquanto no localStorage posso armazenar apenas seqüências de caracteres. Isso significa que o IndexdDB é melhor para dados binários como imagens, áudio e vídeo. Sim, podemos armazenar imagens em base64 no localStorage, mas os blobs serão menores e mais rápidos, porque não precisamos decodificá-los.
Citação da MDN :
Sobre o IndexedDB :
fonte