Soluções comuns de armazenamento de dados front-end incluem principalmente:Cookie、Web Storage、IndexedDB、WebSQL、local Storage、session Storageetc., por exemplo:
| característica | biscoito | localArmazenamento | sessionStorage | indexedDB | | Ciclo de vida dos dados | Geralmente gerado pelo servidor, o tempo de expiração pode ser definido; Componentes como adoção front-end e js-cookie também podem ser gerados | A menos que seja limpo, ela está sempre lá; Quando o navegador está fechado, ele também é salvo localmente, mas não é suportado para múltiplos navegadores | A limpeza e atualização da página ainda existirão quando ela estiver fechada, e a interação entre páginas não for suportada | A menos que seja limpa, ela sempre existiu | | Tamanho do armazenamento de dados | 4K | 5M | 5M | Sem limite de tamanho | | Comunique-se com o servidor | Ele é carregado no cabeçalho solicitado toda vez, o que impacta o desempenho da solicitação; Ao mesmo tempo, por estar incluído no pedido, também é propenso a problemas de segurança | Não participando | Não participando | Não participando | | peculiaridade | Pares chave-valor de string armazenam dados localmente | Pares chave-valor de string armazenam dados localmente | Pares chave-valor de string armazenam dados localmente | IndexedDB é um banco de dados não relacional (operações via instruções SQL não são suportadas). Ele pode armazenar grandes quantidades de dados, fornecer interfaces para consultas e construir índices, o que outras soluções de armazenamento não conseguem fornecer. |
IndexedDB
Este artigo descreve principalmente o uso do IndexedDB para armazenamento front-end, e é apresentado da seguinte forma:
IndexedDB é uma API subjacente para armazenar grandes quantidades de dados estruturados (também arquivos ou objetos binários grandes (blobs)) no lado do cliente. A API utiliza índices para possibilitar buscas de dados de alto desempenho. Embora o Armazenamento Web seja útil para armazenar pequenas quantidades de dados, ele não é tão bom quanto armazenar grandes quantidades de dados estruturados. O IndexedDB oferece uma solução para esse cenário. Esta página é a página principal do guia MDN IndexedDB - aqui, fornecemos uma referência completa da API e guia de uso, detalhes de suporte ao navegador e links para algumas explicações de conceitos-chave.
O IndexedDB possui as seguintes funcionalidades:
(1) Armazenamento de pares chave-valor. O IndexedDB utiliza um armazenamento de objetos para armazenar dados. Todos os tipos de dados podem ser depositados diretamente, incluindo objetos JavaScript. No repositório de objetos, os dados são armazenados na forma de "pares-chave-valor", e cada registro de dados possui uma chave primária correspondente, que é única e não pode ser duplicada, caso contrário um erro será lançado.
(2) Assíncrono. O IndexedDB não bloqueia o navegador e o usuário ainda pode realizar outras operações, ao contrário do LocalStorage, que opera de forma síncrona. O design assíncrono serve para evitar que grandes volumes de dados sejam lidos e escritos, retardando o desempenho das páginas web.
(3) Apoio aos assuntos. O IndexedDB suporta transações, o que significa que, se uma das etapas da operação falhar, toda a transação será cancelada, e o banco de dados será revertido ao estado anterior à transação, e não há caso de reescrever apenas parte dos dados.
(4) Restrição de homologia. IndexedDB está sujeito ao mesmo limite de origem, e cada banco de dados corresponde ao nome de domínio que o criou. Páginas web só podem acessar bancos de dados com seus próprios nomes de domínio, não bancos de dados multidomínio.
(5) Grande espaço de armazenamento. O IndexedDB possui um espaço de armazenamento muito maior que o LocalStorage, geralmente não inferior a 250MB, e não há limite superior.
(6) Suportar armazenamento binário. O IndexedDB pode armazenar não apenas strings, mas também dados binários (objetos ArrayBuffer e objetos Blob).
Se for difícil começar diretamente com o IndexedDB e você precisar encapsulá-lo você mesmo, pode usar alguns pacotes empacotados, como segue:
- localForage: Um Polyfill simples que fornece uma sintaxe de valor simples para armazenamentos de dados do lado do cliente. Ele usa o IndexedDB em segundo plano e retorna ao WebSQL ou localStorage em navegadores que não suportam IndexedDB.
- Dexie.js: Os wrappers do IndexedDB permitem um desenvolvimento de código mais rápido por meio de sintaxe simples.
- ZangoDB: Uma interface IndexedDB semelhante ao MongoDB, que suporta a maioria das funções familiares de filtragem, projeção, ordenação, atualização e agregação do MongoDB.
- JsStore: Um wrapper IndexedDB com sintaxe SQL.
- MiniMongo: MongoDB na memória do cliente suportado por localstorage, sincronização do servidor via http. MeteorJS usa MiniMongo.
- PouchDB: Um cliente que implementa o CouchDB no navegador usando o IndexedDB.
- idb: Uma biblioteca minúscula (〜1.15k) com a maior parte da API semelhante ao IndexedDB, mas com algumas melhorias menores que melhoram muito a usabilidade do banco de dados.
- idb-keyval: Armazenamento chave-valor baseado em promessas super simples e pequeno (~600B) implementado com IndexedDB.
- sifrr-storage: Um banco de dados de chave-valor do lado do cliente baseado em promessas muito pequeno (~2kB). Implementado com base em IndexedDB, localStorage, WebSQL e Cookies. Ele pode selecionar automaticamente os bancos de dados suportados mencionados acima e usá-los em ordem de prioridade.
- lovefield: Lovefield é um banco de dados relacional para aplicações web, escrito em JavaScript, pode rodar em diferentes ambientes de navegador e oferece uma API semelhante a SQL, rápida, segura e fácil de usar.
Local Forage
O localForage é um repositório JavaScript rápido e simples. O localForage melhora a experiência offline das aplicações web usando armazenamento assíncrono (IndexedDB ou WebSQL) e uma API simples semelhante ao localStorage. o localForage usa localStorage em navegadores que não têm suporte a IndexedDB ou WebSQL.
Endereço do GitHub:O login do hiperlink está visível.
Tutorial de Chinês:O login do hiperlink está visível.
O localForage fornece dois arquivos js diferentes, as diferenças são as seguintes:
localforage.js: uma biblioteca Promise contendo a implementação lie (O login do hiperlink está visível.), o arquivo é relativamente grande, e a sintaxe da promessa pode ser usada em navegadores mais antigos.
localforage.nopromises.js: Não há implementação do Promise, apenas novas versões dos navegadores são suportadas.
Código de teste:
(Fim)
|
Publicado em 12/10/2023 20:42:27
|
|
|
|
Senhorio|
Publicado em 02/03/2025 19:12:18
|
