IndexedDB é uma API de baixo nível que armazena um grande número de dados estruturados (incluindo arquivo/ blobs) para armazenamento do cliente. A API usa um índice para obter uma pesquisa de alto desempenho pelos dados.
Recentemente, existem necessidades comerciais que podem armazenar dados offline, e o formulário e as imagens podem ser carregados quando houver sinais de rede. Então eu estudei o indexedDB de html5.
Para as necessidades de armazenamento apenas de determinados campos, o armazenamento local e o armazenamento de sessão pode ser usado para concluir. Mas uma vez que uma grande quantidade de dados é armazenada, o armazenamento local e o armazenamento da sessão está longe de atender às necessidades. Neste momento, a força do indexedDB será refletida.
1. Crie ou abra o banco de dados/* Compatível com diferentes navegadores 'indexeddb*/const indexeddb = window.indexeddb || window.webkitindexeddb ||. versão);
Como o indexedDB é compatível em diferentes navegadores, precisamos de uma parte da função para ser compatível com o indexedDB.
2. A função de retorno de chamada conectada ao banco de dados Request.addeventlistener ('sucesso', function (event) {// Abra ou crie o banco de dados}, false); );Depois de se conectar ao banco de dados, a solicitação ouvirá três estados:
O estado atualizado é monitorar esse estado quando o indexeddddb cria um novo banco de dados e indexedb.open (name, versão) versão (número da versão do banco de dados). Quando o número da versão não mudar, esse estado não será acionado. A criação e exclusão do ObjectStore do banco de dados são realizadas neste evento de monitoramento.
3. Crie e exclua o ObjectStoreNo indexedDB, o ObjectStore é semelhante à tabela de banco de dados.
Request.addeventListener ('upgradeNeeded', function (event) {// Crie uma instância do banco de dados const db = event.target.result; // Desligue o banco de dados db.close (); // bkystorenames.contains (objectstorename); / Exclate objectStore db.deleteObjectStore (objectStorename);}, false);Você pode usar o seguinte método para criar um objeto
Request.addeventListener ('upgradeNeeded', function (event) {// Crie uma instância do banco de dados const db = event.target.result; // determinar se existe objectStore if (! Db.ObjectStorenames. db .CreateObjectStore (ObjectStorename, {Keypath: Keypath // Keypath como Palavras -chave de pesquisa como objectStore}); Índice é exclusivo});}}, false); 4. Adição de dados, exclusão, verificação de alteração Request.adDeventListener ('Sucesso', function (event) {// Crie uma instância do banco de dados const db = event.target.result; // Encontre um objectStore db.transaction (objectStorename, wa); // wa é 'readwrite', Quando os dados podem ser lidos e gravar // Quando os dados são 'readonamente', os dados lê apenas o const store = transaction.objectStore (objectStorename);}, false);Adição de banco de dados, exclusão e alteração:
// Adicionar dados. Data Store.Delete correspondente (Valor) correspondente às palavras -chave especificadas; ('Sucesso', função (evento) {// a função de retorno de chamada}, false);Encontre dados de acordo com os índices
Const index = store.index (indexName); value // Data Result.Continue ();
Encontre dados de acordo com o escopo do índice
const index = store.index (indexName); O objeto IdbkeyRange são os dados do intervalo especificado da faixa especificada da condição de acordo com as condições*/// maior que ou mais ou igual ao range = iDbkeyRange.lowerBound (valor, true) // (valor, + ∞),> ValueRange = Idbkeyrange. (Valor, isopen) // maior ou igual a value1, menor ou igual a valor2idbkeyRange.bound (value1, value2, isopen1, isopen2)
Finalmente, uma biblioteca de indexedDB é encapsulada por mim.
O acima é o IndexedDB do HTML5 Local Storage introduzido pela Xiaobian. Muito obrigado pelo seu apoio ao site VevB Wulin!