HTML - Banco de Dados Indexado

Criando Dados

Para adicionar dados a um armazenamento de objetos no IndexedDB, você precisa usar transações. Primeiro, abra uma transação no armazenamento de objetos desejado com o modo "readwrite". Depois, obtenha uma referência ao armazenamento de objetos usando o método objectStore() no objeto de transação. Por fim, use o método add() ou put() no armazenamento de objetos para adicionar os dados.

let db;
let request = indexedDB.open("MyDatabase", 1);

request.onsuccess = function(event) {
  db = event.target.result;
  addData({ id: 1, name: "John Doe", age: 25 });
};

function addData(data) {
  let transaction = db.transaction(["MyObjectStore"], "readwrite");
  let objectStore = transaction.objectStore("MyObjectStore");

  let request = objectStore.add(data);

  request.onsuccess = function(event) {
    console.log("Dados adicionados com sucesso");
  };

  request.onerror = function(event) {
    console.log("Erro ao adicionar dados");
  };
}

O método add() é usado para adicionar novos dados, enquanto o método put() pode ser usado para adicionar novos dados ou atualizar dados existentes se a chave já existir.

É importante lidar com erros que podem ocorrer durante o processo de adição de dados. Você pode usar o manipulador de eventos onerror no objeto de solicitação para capturar e tratar quaisquer erros.

Lendo Dados

Para obter dados de um armazenamento de objetos, você pode usar o método get() no armazenamento de objetos. Você precisa fornecer a chave dos dados que deseja obter.

let transaction = db.transaction(["MyObjectStore"], "readonly");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.get(1);

request.onsuccess = function(event) {
  let data = event.target.result;
  console.log("Dados recuperados:", data);
};

Se você quiser pesquisar dados com base em uma propriedade específica, pode usar índices. Primeiro, obtenha uma referência ao índice usando o método index() no armazenamento de objetos. Em seguida, use o método get() no índice para obter dados com base na chave do índice.

let transaction = db.transaction(["MyObjectStore"], "readonly");
let objectStore = transaction.objectStore("MyObjectStore");
let index = objectStore.index("name");

let request = index.get("John Doe");

request.onsuccess = function(event) {
  let data = event.target.result;
  console.log("Dados recuperados:", data);
};

Para consultas mais avançadas ou para percorrer várias entradas de dados, você pode usar cursores. Os cursores permitem percorrer todos os dados em um armazenamento de objetos ou índice. Você pode abrir um cursor usando o método openCursor() no armazenamento de objetos ou índice.

let transaction = db.transaction(["MyObjectStore"], "readonly");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.openCursor();

request.onsuccess = function(event) {
  let cursor = event.target.result;
  if (cursor) {
    console.log("Chave:", cursor.key);
    console.log("Dados:", cursor.value);
    cursor.continue();
  } else {
    console.log("Não há mais dados");
  }
};

No exemplo acima, abrimos um cursor no armazenamento de objetos. O manipulador de eventos onsuccess é chamado para cada entrada de dados. Podemos acessar a chave e o valor da entrada atual usando cursor.key e cursor.value, respectivamente. Para ir para a próxima entrada, chamamos o método continue() no cursor.

Atualizando Dados

Para atualizar dados existentes em um armazenamento de objetos, você pode usar o método put(). Ele funciona de maneira semelhante ao método add(), mas se a chave já existir, ele atualizará os dados correspondentes.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let updatedData = { id: 1, name: "John Doe", age: 26 };
let request = objectStore.put(updatedData);

request.onsuccess = function(event) {
  console.log("Dados atualizados com sucesso");
};

Você também pode atualizar campos específicos de uma entrada de dados existente usando o método put(). Primeiro, obtenha os dados usando o método get(), atualize os campos desejados e, em seguida, use put() para salvar as alterações.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.get(1);

request.onsuccess = function(event) {
  let data = event.target.result;
  data.age = 27;

  let updateRequest = objectStore.put(data);

  updateRequest.onsuccess = function(event) {
    console.log("Dados atualizados com sucesso");
  };
};

Ao atualizar dados, esteja atento ao versionamento e mudanças de esquema. Se você precisar alterar a estrutura de seus armazenamentos de objetos ou índices, deve lidar com isso no manipulador de eventos onupgradeneeded e versionar adequadamente seu banco de dados.

Excluindo Dados

Para remover dados de um armazenamento de objetos, você pode usar o método delete() no armazenamento de objetos. Você precisa fornecer a chave dos dados que deseja remover.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.delete(1);

request.onsuccess = function(event) {
  console.log("Dados removidos com sucesso");
};

Se você quiser limpar um armazenamento de objetos inteiro, pode usar o método clear() no armazenamento de objetos.

let transaction = db.transaction(["MyObjectStore"], "readwrite");
let objectStore = transaction.objectStore("MyObjectStore");

let request = objectStore.clear();

request.onsuccess = function(event) {
  console.log("Armazenamento de objetos limpo com sucesso");
};

Para excluir um banco de dados, você pode usar o método deleteDatabase() no objeto indexedDB. Isso removerá completamente o banco de dados e todos os seus armazenamentos de objetos.

let request = indexedDB.deleteDatabase("MyDatabase");

request.onsuccess = function(event) {
  console.log("Banco de dados excluído com sucesso");
};

Tenha cuidado ao excluir dados, pois é uma operação permanente e não pode ser desfeita.

Versionamento e Atualizações

O IndexedDB usa versionamento para gerenciar mudanças na estrutura do banco de dados ao longo do tempo. Cada banco de dados tem um número de versão associado a ele. Quando você abre um banco de dados com um número de versão maior que o atual, o evento onupgradeneeded é acionado, permitindo que você altere o esquema do banco de dados.

let request = indexedDB.open("MeuBancoDeDados", 2); // Atualizar para versão 2

request.onupgradeneeded = function(event) {
  let db = event.target.result;

  // Realizar mudanças no esquema do banco de dados
  if (event.oldVersion < 1) {
    // Criar object stores e índices para a versão 1
    let objectStore = db.createObjectStore("MeuObjectStore", { keyPath: "id" });
    objectStore.createIndex("nome", "nome", { unique: false });
  }

  if (event.oldVersion < 2) {
    // Fazer alterações para a versão 2
    let objectStore = db.createObjectStore("OutroObjectStore", { keyPath: "id" });
    objectStore.createIndex("categoria", "categoria", { unique: false });
  }
};

No exemplo acima, abrimos o banco de dados com a versão 2. Se a versão atual for menor que 2, o evento onupgradeneeded é acionado. Podemos então verificar a propriedade oldVersion para encontrar a versão atual e fazer as mudanças necessárias no esquema para cada atualização de versão.

Índices e Chaves Compostas

Os índices no IndexedDB permitem consultar e pesquisar dados de forma eficiente com base em propriedades específicas. Você pode criar índices em propriedades únicas ou criar índices compostos que combinam várias propriedades.

let request = indexedDB.open("MeuBancoDeDados", 1);

request.onupgradeneeded = function(event) {
  let db = event.target.result;
  let objectStore = db.createObjectStore("MeuObjectStore", { keyPath: "id" });

  // Criar um índice de propriedade única
  objectStore.createIndex("nome", "nome", { unique: false });

  // Criar um índice composto
  objectStore.createIndex("nomeIdade", ["nome", "idade"], { unique: false });
};

No exemplo acima, criamos um índice de propriedade única na propriedade "nome" e um índice composto nas propriedades "nome" e "idade". Os índices compostos permitem consultar dados com base em várias propriedades ao mesmo tempo.

Transações e Concorrência

As transações no IndexedDB garantem que os dados estejam corretos e consistentes. Todas as operações de banco de dados devem ser feitas dentro de uma transação. As transações podem ser somente leitura ou leitura e escrita, dependendo do tipo de operações sendo realizadas.

O IndexedDB também suporta acesso concorrente ao banco de dados. Várias transações podem estar ativas ao mesmo tempo, mas elas operam em object stores diferentes ou têm modos de acesso diferentes (somente leitura ou leitura e escrita) para evitar conflitos.

let transacao1 = db.transaction(["ObjectStore1"], "readonly");
let transacao2 = db.transaction(["ObjectStore2"], "readwrite");

// Várias transações podem estar ativas simultaneamente
transacao1.objectStore("ObjectStore1").get(1);
transacao2.objectStore("ObjectStore2").add({ id: 1, nome: "João" });

No exemplo acima, temos duas transações ativas ao mesmo tempo. transacao1 é somente leitura e opera em "ObjectStore1", enquanto transacao2 é leitura e escrita e opera em "ObjectStore2". Elas podem prosseguir independentemente sem conflitos.

Considerações de Desempenho

Para otimizar o desempenho do uso do IndexedDB, considere o seguinte:

Ao manter essas considerações de desempenho em mente e usar bem índices, transações e concorrência, você pode construir aplicações web eficientes e rápidas com o IndexedDB.

Tratamento de Dados Sensíveis

Se sua aplicação lida com dados sensíveis, como informações pessoais ou detalhes financeiros, você precisa tomar precauções extras ao armazenar e manipular esses dados no IndexedDB. Aqui estão algumas práticas recomendadas:

1. Criptografar dados sensíveis: Antes de armazenar informações sensíveis no IndexedDB, criptografe-as usando um algoritmo de criptografia forte. Dessa forma, mesmo que alguém obtenha acesso aos dados do IndexedDB, não conseguirá ler as informações sensíveis sem a chave de criptografia.

2. Usar bibliotecas de criptografia seguras: Utilize bibliotecas e algoritmos de criptografia bem estabelecidos e confiáveis, como o AES (Advanced Encryption Standard), para criptografar e descriptografar dados sensíveis. Não crie seus próprios algoritmos de criptografia, pois eles podem conter vulnerabilidades.

3. Armazenar chaves de criptografia com segurança: Mantenha as chaves de criptografia usadas para criptografar e descriptografar dados sensíveis em local seguro. Não as armazene no mesmo banco de dados que os dados criptografados. Em vez disso, considere usar técnicas como funções de derivação de chaves ou mecanismos seguros de armazenamento de chaves fornecidos pela plataforma ou navegador.

4. Minimizar a retenção de dados: Armazene dados sensíveis no IndexedDB apenas quando absolutamente necessário. Se os dados não forem mais necessários, exclua-os com segurança do banco de dados. Revise e remova regularmente quaisquer informações sensíveis desnecessárias para reduzir o risco de violações de dados.

Garantindo o Acesso Seguro ao IndexedDB

Além de lidar com dados sensíveis de forma segura, você também deve controlar o acesso ao IndexedDB para evitar acessos ou alterações não autorizados. Aqui estão algumas medidas que você pode tomar:

1. Usar recursos de segurança do navegador: Utilize recursos de segurança do navegador, como a Política de Mesma Origem e a Política de Segurança de Conteúdo (CSP), para restringir o acesso ao IndexedDB de fontes não confiáveis. Essas políticas ajudam a prevenir ataques de cross-site scripting (XSS) e acesso não autorizado ao IndexedDB de origens diferentes.

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">

2. Implementar autenticação de usuário: Se sua aplicação requer autenticação de usuário, certifique-se de que apenas usuários autenticados possam acessar os dados do IndexedDB. Use mecanismos de autenticação seguros, como tokens ou gerenciamento de sessão, para verificar a identidade do usuário antes de conceder acesso ao banco de dados.

// Exemplo de autenticação baseada em token
fetch('https://api.example.com/data', {
  method: 'GET',
  headers: {
    'Authorization': 'Bearer ' + token
  }
})
  .then(response => response.json())
  .then(data => console.log(data));

3. Aplicar controles de acesso: Implemente controles de acesso baseados em funções ou permissões de usuário. Decida quais usuários ou grupos de usuários devem ter acesso de leitura ou gravação a object stores específicos ou dados dentro do IndexedDB. Use esses controles de acesso de forma consistente em toda a sua aplicação.

4. Validar e sanitizar a entrada do usuário: Ao aceitar entradas do usuário que serão armazenadas no IndexedDB, valide e sanitize a entrada para evitar possíveis vulnerabilidades de segurança, como injeção de SQL ou ataques de cross-site scripting. Use regras de validação rigorosas e escape ou remova quaisquer caracteres ou scripts maliciosos.

const sanitizedInput = input.replace(/[<>]/g, ''); // sanitização simples

5. Usar comunicação segura: Se sua aplicação se comunica com um servidor para sincronizar dados do IndexedDB, certifique-se de que o canal de comunicação seja seguro. Use HTTPS/SSL para criptografar os dados transmitidos entre o cliente e o servidor, evitando interceptação ou adulteração.

<form action="https://seuservidor.com/enviar" method="post">
  <input type="text" name="data">
  <input type="submit" value="Enviar">
</form>

Lembre-se de que a segurança é um processo contínuo, e é importante manter-se atualizado com as melhores práticas e vulnerabilidades de segurança mais recentes. Revise e atualize regularmente suas medidas de segurança para proteger dados sensíveis e manter sua implementação do IndexedDB segura.

Armazenamento e Sincronização de Dados Offline

Um dos principais benefícios do IndexedDB é sua capacidade de armazenar dados offline e permitir funcionalidade offline em aplicações web. Com o IndexedDB, você pode armazenar dados da aplicação localmente no dispositivo do usuário, permitindo que eles acessem e interajam com a aplicação mesmo quando não estão conectados à internet.

// Armazenar dados offline
function armazenarDadosOffline(dados) {
  let transacao = db.transaction(["MeuObjetoArmazenado"], "readwrite");
  let objetoArmazenado = transacao.objectStore("MeuObjetoArmazenado");

  let requisicao = objetoArmazenado.add(dados);

  requisicao.onsuccess = function(evento) {
    console.log("Dados armazenados offline");
  };
}

// Sincronizar dados quando online
function sincronizarDadosComServidor() {
  let transacao = db.transaction(["MeuObjetoArmazenado"], "readonly");
  let objetoArmazenado = transacao.objectStore("MeuObjetoArmazenado");

  let requisicao = objetoArmazenado.openCursor();

  requisicao.onsuccess = function(evento) {
    let cursor = evento.target.result;
    if (cursor) {
      let dados = cursor.value;
      enviarDadosParaServidor(dados);
      cursor.continue();
    } else {
      console.log("Todos os dados sincronizados com o servidor");
    }
  };
}

// Enviar dados para o servidor
function enviarDadosParaServidor(dados) {
  fetch('https://api.exemplo.com/dados', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(dados)
  })
    .then(resposta => {
      if (resposta.ok) {
        console.log("Dados sincronizados com o servidor");
      }
    });
}

A função armazenarDadosOffline guarda dados no IndexedDB quando a aplicação está offline. Os dados são adicionados a um objeto armazenado dentro de uma transação. Posteriormente, quando a aplicação volta a ficar online, a função sincronizarDadosComServidor usa um cursor para percorrer todos os dados armazenados e envia cada item de dados para o servidor usando a função enviarDadosParaServidor. Dessa forma, a aplicação pode funcionar offline e sincronizar os dados com o servidor quando a conexão é restaurada.

Armazenamento em Cache de Dados da Aplicação

O IndexedDB pode ser usado como um mecanismo de cache para armazenar localmente dados frequentemente acessados ou de carregamento lento. Ao armazenar dados em cache no IndexedDB, você pode melhorar o desempenho e a velocidade da sua aplicação web.

// Verificar cache para dados
function obterDadosDoCache(chave) {
  return new Promise((resolver, rejeitar) => {
    let transacao = db.transaction(["ArmazenamentoCache"], "readonly");
    let objetoArmazenado = transacao.objectStore("ArmazenamentoCache");

    let requisicao = objetoArmazenado.get(chave);

    requisicao.onsuccess = function(evento) {
      let dados = evento.target.result;
      if (dados) {
        console.log("Dados recuperados do cache");
        resolver(dados);
      } else {
        console.log("Dados não encontrados no cache");
        rejeitar();
      }
    };
  });
}

// Armazenar dados no cache
function armazenarDadosNoCache(chave, dados) {
  let transacao = db.transaction(["ArmazenamentoCache"], "readwrite");
  let objetoArmazenado = transacao.objectStore("ArmazenamentoCache");

  let requisicao = objetoArmazenado.put(dados, chave);

  requisicao.onsuccess = function(evento) {
    console.log("Dados armazenados no cache");
  };
}

// Obter dados do cache ou buscar do servidor
function obterDados(chave) {
  obterDadosDoCache(chave)
    .then(dados => {
      console.log("Dados recuperados do cache:", dados);
    })
    .catch(() => {
      fetch(`https://api.exemplo.com/dados/${chave}`)
        .then(resposta => resposta.json())
        .then(dados => {
          console.log("Dados recuperados do servidor:", dados);
          armazenarDadosNoCache(chave, dados);
        });
    });
}

A função obterDadosDoCache verifica se os dados solicitados estão disponíveis no cache (IndexedDB). Se os dados forem encontrados, eles são resolvidos e retornados. Se os dados não forem encontrados no cache, a função é rejeitada, e a função obterDados busca os dados do servidor usando a API fetch. Depois que os dados são recuperados do servidor, eles são armazenados no cache usando a função armazenarDadosNoCache para acesso futuro.

Ao implementar esse mecanismo de cache, você pode reduzir o número de solicitações de rede e melhorar a velocidade de carregamento da sua aplicação, servindo dados do cache local quando disponível.

Implementação de Funcionalidade de Busca

As capacidades de indexação do IndexedDB o tornam adequado para implementar funcionalidades de busca em uma aplicação web. Ao criar índices em campos pesquisáveis, você pode pesquisar e recuperar dados rapidamente com base em critérios específicos.

// Criar índice em campo pesquisável
function criarIndiceDeBusca() {
  let requisicao = indexedDB.open("MinhaBaseDeDados", 1);

  requisicao.onupgradeneeded = function(evento) {
    let db = evento.target.result;
    let objetoArmazenado = db.createObjectStore("ArmazenamentoProduto", { keyPath: "id" });
    objetoArmazenado.createIndex("nome", "nome", { unique: false });
  };
}

// Buscar dados usando índice
function buscarDados(termoBusca) {
  let transacao = db.transaction(["ArmazenamentoProduto"], "readonly");
  let objetoArmazenado = transacao.objectStore("ArmazenamentoProduto");
  let indice = objetoArmazenado.index("nome");

  let requisicao = indice.getAll(IDBKeyRange.bound(termoBusca, termoBusca + '\uffff'));

  requisicao.onsuccess = function(evento) {
    let resultados = evento.target.result;
    console.log("Resultados da busca:", resultados);
  };
}

// Exemplo de uso
criarIndiceDeBusca();

// Adicionar dados de exemplo
let transacao = db.transaction(["ArmazenamentoProduto"], "readwrite");
let objetoArmazenado = transacao.objectStore("ArmazenamentoProduto");
objetoArmazenado.add({ id: 1, nome: "Maçã", categoria: "Fruta" });
objetoArmazenado.add({ id: 2, nome: "Banana", categoria: "Fruta" });
objetoArmazenado.add({ id: 3, nome: "Laranja", categoria: "Fruta" });

// Realizar busca
buscarDados("Maç");

Criamos um índice no campo "nome" do objeto armazenado "ArmazenamentoProduto" usando a função criarIndiceDeBusca. Isso permite buscas eficientes baseadas no nome do produto.

A função buscarDados realiza uma busca usando o índice. Ela recebe um termo de busca como entrada e usa o método getAll com um IDBKeyRange para encontrar todos os produtos que correspondem ao termo de busca.

No exemplo de uso, criamos o índice de busca, adicionamos alguns dados de exemplo ao objeto armazenado "ArmazenamentoProduto" e então realizamos uma busca por produtos com "Maç" em seus nomes. Os resultados da busca são registrados no console.

Estes são apenas alguns exemplos de como o IndexedDB pode ser usado em cenários práticos. A flexibilidade e os recursos poderosos do IndexedDB o tornam adequado para uma ampla gama de casos de uso onde o armazenamento e o manuseio de dados do lado do cliente são necessários.