Introdução
No desenvolvimento web moderno, soluções de armazenamento do lado do cliente, como o Armazenamento Local, tornaram-se essenciais para a construção de aplicativos eficientes e fáceis de usar. O Armazenamento Local permite que os desenvolvedores armazenem dados no navegador do usuário, possibilitando recursos como acesso offline e preferências persistentes do usuário sem a necessidade de bancos de dados do lado do servidor.
Neste artigo, mostraremos como criar um aplicativo CRUD (Criar, Ler, Atualizar, Excluir) simples usando HTML5, JavaScript e Armazenamento Local. Este aplicativo permitirá que os usuários armazenem, recuperem, atualizem e excluam pares de chave-valor diretamente no navegador.
Índice
- Pré-requisitos
- Visão geral do projeto
- Configurando a estrutura HTML
- Estilização com CSS
- Implementando a funcionalidade JavaScript
- Código Final
- Testando o aplicativo
- Conclusão
- Recursos adicionais
Pré-requisitos
Para acompanhar este tutorial, você deve ter:
- Conhecimento básico de HTML, CSS e JavaScript.
- Um navegador moderno (por exemplo, Chrome, Firefox, Edge).
- Um editor de texto ou IDE (por exemplo, Visual Studio Code, Sublime Text).
Visão geral do projeto
Construiremos uma página web simples que:
- Fornece campos de entrada para o usuário inserir uma chave e um valor .
- Oferece botões para executar operações Criar , Ler , Atualizar e Excluir .
- Exibe todos os pares chave-valor armazenados em um formato de tabela.
- Utiliza armazenamento local para persistir dados entre sessões.
Configurando a estrutura HTML
Vamos começar criando um arquivo HTML básico com os elementos necessários.
Crie um arquivo chamado local_storage_crud.html e adicione o seguinte código:
HTML
Explicação:
-
Cabeçalho (
<h1>): Exibe o título do aplicativo. -
Campos de entrada:
-
Entrada de chave (
#dataKey): para inserir a chave. -
Entrada de valor (
#dataValue): para inserir o valor.
-
Entrada de chave (
- Botões: Cada botão aciona uma função JavaScript correspondente a uma operação CRUD.
-
Exibição de dados (
#dataDisplay): Um elemento<div>onde exibiremos os dados armazenados.
Estilização com CSS
Para tornar o aplicativo visualmente atraente, adicionaremos alguns estilos CSS básicos.
Adicione a seguinte tag <style> dentro da seção <head> :
HTML
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
input, button {
margin: 5px;
padding: 8px;
font-size: 16px;
}
#dataDisplay {
margin-top: 20px;
}
table {
border-collapse: collapse;
largura : 100% ;
margem superior : 10px ;
}
º , td {
borda : 1px sólido #ddd ;
preenchimento : 8px ;
alinhamento de texto : esquerda;
}
o {
cor de fundo : #f4f4f4 ;
}
botão {
cursor : ponteiro;
}
</ estilo >
Explicação:
- Estilos gerais: define a família da fonte e as margens para o corpo.
- Entradas e botões: adiciona margem, preenchimento e tamanho de fonte para melhor usabilidade.
- Exibição de dados: adiciona margem para separá-lo da área de entrada.
- Estilos de tabela: estiliza a tabela, os cabeçalhos e as células para uma apresentação clara dos dados.
- Cursor de botão: transforma o cursor em um ponteiro ao passar o mouse sobre os botões.
Implementando a funcionalidade JavaScript
Agora adicionaremos funções JavaScript para manipular cada operação CRUD e exibir os dados.
Adicione a seguinte tag <script> logo antes da tag de fechamento </body> :
HTML
< script >
// Function to create data
função createData ( ) {
var chave = documento . getElementById ( 'dataKey' ). valor ;
var valor = documento . getElementById ( 'dataValue' ). valor ;
se (chave e valor) {
se ( localStorage.getItem (chave) === nulo ) {
localStorage . setItem (chave, valor);
alerta ( 'Dados adicionados ao armazenamento local.' );
exibirDados ();
} outro {
alert ( 'A chave já existe. Use Atualizar para modificar o valor.' );
}
} outro {
alert ( 'Por favor, insira a chave e o valor.' );
}
}
// Função para ler dados
função readData ( ) {
var chave = documento . getElementById ( 'dataKey' ). valor ;
se (chave) {
var valor = localStorage . getItem (chave);
se (valor !== nulo ) {
alerta ( 'Chave: ' + chave + '\nValor: ' + valor);
} outro {
alert ( 'Nenhum dado encontrado para a chave fornecida.' );
}
} outro {
alert ( 'Por favor, insira uma chave para ler os dados.' );
}
}
// Função para atualizar dados
função updateData ( ) {
var chave = documento . getElementById ( 'dataKey' ). valor ;
var valor = documento . getElementById ( 'dataValue' ). valor ;
se (chave e valor) {
se ( localStorage.getItem (chave) !== nulo ) {
localStorage . setItem (chave, valor);
alerta ( 'Dados atualizados no armazenamento local.' );
exibirDados ();
} outro {
alert ( 'Nenhum dado encontrado para a chave fornecida. Use Criar para adicionar novos dados.' );
}
} outro {
alert ( 'Por favor, insira a chave e o valor.' );
}
}
// Função para apagar dados
função deleteData ( ) {
var chave = documento . getElementById ( 'dataKey' ). valor ;
se (chave) {
se ( localStorage.getItem (chave) !== nulo ) {
localStorage . removeItem (chave);
alerta ( 'Dados excluídos do armazenamento local.' );
exibirDados ();
} outro {
alert ( 'Nenhum dado encontrado para a chave fornecida.' );
}
} outro {
alert ( 'Por favor, insira uma chave para excluir dados.' );
}
}
// Função para exibir todos os dados
função displayData ( ) {
var dataDisplay = document . getElementById ( 'dataDisplay' );
dataDisplay.innerHTML = '' ;
se ( localStorage . comprimento > 0 ) {
var tabela = '<table><tr><th>Chave</th><th>Valor</th></tr>' ;
para ( var i = 0 ; i < localStorage . comprimento ; i++) {
var chave = localStorage . chave (i);
var valor = localStorage . getItem (chave);
tabela += '<tr><td>' + chave + '</td><td>' + valor + '</td></tr>' ;
}
tabela += '</table>' ;
dataDisplay.innerHTML = tabela;
} outro {
dataDisplay. innerHTML = 'O armazenamento local está vazio.' ;
}
}
// Exibir dados quando a página carrega
janela . onload = função ( ) {
exibirDados ();
}
</ script >
Criar dados
Função: createData()
- Finalidade: Adiciona um novo par chave-valor ao Armazenamento Local se a chave ainda não existir.
-
Lógica:
- Recupera a chave e o valor dos campos de entrada.
- Verifica se a chave e o valor são fornecidos.
- Verifica se a chave já existe no Armazenamento Local.
- Armazena o par chave-valor se a chave for nova.
- Chama
displayData()para atualizar os dados exibidos.
Ler dados
Função: readData()
- Objetivo: Recupera e exibe o valor associado a uma determinada chave.
-
Lógica:
- Recupera a chave do campo de entrada.
- Verifica se a chave foi fornecida.
- Obtém o valor do Armazenamento Local.
- Exibe um alerta com a chave e o valor ou uma mensagem de erro.
Atualizar dados
Função: updateData()
- Finalidade: Atualiza o valor de uma chave existente no Armazenamento Local.
-
Lógica:
- Recupera a chave e o novo valor dos campos de entrada.
- Verifica se a chave e o valor são fornecidos.
- Verifica se a chave existe no armazenamento local.
- Atualiza o valor se a chave existir.
- Chama
displayData()para atualizar os dados exibidos.
Excluir dados
Função: deleteData()
- Finalidade: Remove um par chave-valor do Armazenamento Local.
-
Lógica:
- Recupera a chave do campo de entrada.
- Verifica se a chave foi fornecida.
- Verifica se a chave existe no armazenamento local.
- Remove o par chave-valor se a chave existir.
- Chama
displayData()para atualizar os dados exibidos.
Exibir dados
Função: displayData()
- Objetivo: Exibe todos os pares chave-valor armazenados no Armazenamento Local em uma tabela.
-
Lógica:
- Limpa o conteúdo existente no elemento
#dataDisplay. - Verifica se o Armazenamento Local possui dados.
- Itera por todas as chaves no Armazenamento Local.
- Cria uma tabela HTML com todos os pares chave-valor.
- Insere a tabela no elemento
#dataDisplay.
- Limpa o conteúdo existente no elemento
Observação: o evento window.onload garante que os dados sejam exibidos assim que a página for carregada.
Código Final
Combinando todas as seções, seu arquivo HTML final deve ficar assim:
HTML
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< title > Local Storage CRUD Application </ title >
< estilo >
corpo {
família de fontes : Arial, sem serifa;
margem : 20px ;
}
entrada , botão {
margem : 5px ;
preenchimento : 8px ;
tamanho da fonte : 16px ;
}
#exibição de dados {
margem superior : 20px ;
}
mesa {
colapso de fronteira : colapso;
largura : 100% ;
margem superior : 10px ;
}
º , td {
borda : 1px sólido #ddd ;
preenchimento : 8px ;
alinhamento de texto : esquerda;
}
o {
cor de fundo : #f4f4f4 ;
}
botão {
cursor : ponteiro;
}
</ estilo >
</head>
< corpo >
< h1 > Aplicativo CRUD de armazenamento local </ h1 >
< tipo de entrada = "texto" id = "dataKey" espaço reservado = "Tecla de inserção" >
< tipo de entrada = "texto" id = "valor de dados" espaço reservado = "Digite o valor" >
< button onclick = "createData()" > Criar </ button >
< button onclick = "readData()" > Ler </ button >
< button onclick = "updateData()" > Atualizar </ button >
< button onclick = "deleteData()" > Excluir </ button >
< div id = "dataDisplay" > </ div >
< script >
// Função para criar dados
função createData ( ) {
var chave = documento . getElementById ( 'dataKey' ). valor ;
var valor = documento . getElementById ( 'dataValue' ). valor ;
se (chave e valor) {
se ( localStorage.getItem (chave) === nulo ) {
localStorage . setItem (chave, valor);
alerta ( 'Dados adicionados ao armazenamento local.' );
exibirDados ();
} outro {
alert ( 'A chave já existe. Use Atualizar para modificar o valor.' );
}
} outro {
alert ( 'Por favor, insira a chave e o valor.' );
}
}
// Função para ler dados
função readData ( ) {
var chave = documento . getElementById ( 'dataKey' ). valor ;
se (chave) {
var valor = localStorage . getItem (chave);
se (valor !== nulo ) {
alerta ( 'Chave: ' + chave + '\nValor: ' + valor);
} outro {
alert ( 'Nenhum dado encontrado para a chave fornecida.' );
}
} outro {
alert ( 'Por favor, insira uma chave para ler os dados.' );
}
}
// Função para atualizar dados
função updateData ( ) {
var chave = documento . getElementById ( 'dataKey' ). valor ;
var valor = documento . getElementById ( 'dataValue' ). valor ;
se (chave e valor) {
se ( localStorage.getItem (chave) !== nulo ) {
localStorage . setItem (chave, valor);
alerta ( 'Dados atualizados no armazenamento local.' );
exibirDados ();
} outro {
alert ( 'Nenhum dado encontrado para a chave fornecida. Use Criar para adicionar novos dados.' );
}
} outro {
alert ( 'Por favor, insira a chave e o valor.' );
}
}
// Função para apagar dados
função deleteData ( ) {
var chave = documento . getElementById ( 'dataKey' ). valor ;
se (chave) {
se ( localStorage.getItem (chave) !== nulo ) {
localStorage . removeItem (chave);
alerta ( 'Dados excluídos do armazenamento local.' );
exibirDados ();
} outro {
alert ( 'Nenhum dado encontrado para a chave fornecida.' );
}
} outro {
alert ( 'Por favor, insira uma chave para excluir dados.' );
}
}
// Função para exibir todos os dados
função displayData ( ) {
var dataDisplay = document . getElementById ( 'dataDisplay' );
dataDisplay.innerHTML = '' ;
se ( localStorage . comprimento > 0 ) {
var tabela = '<table><tr><th>Chave</th><th>Valor</th></tr>' ;
para ( var i = 0 ; i < localStorage . comprimento ; i++) {
var chave = localStorage . chave (i);
var valor = localStorage . getItem (chave);
tabela += '<tr><td>' + chave + '</td><td>' + valor + '</td></tr>' ;
}
tabela += '</table>' ;
dataDisplay.innerHTML = tabela;
} outro {
dataDisplay. innerHTML = 'O armazenamento local está vazio.' ;
}
}
// Exibir dados quando a página carrega
janela . onload = função ( ) {
exibirDados ();
}
</ script >
</ corpo >
</ html >
Testando o aplicativo
-
Abra o arquivo HTML:
- Clique duas vezes no arquivo
local_storage_crud.htmlpara abri-lo no seu navegador padrão. - Como alternativa, clique com o botão direito do mouse no arquivo e escolha "Abrir com" e, em seguida, seu navegador preferido.
- Clique duas vezes no arquivo
-
Criar dados:
- Insira uma chave (por exemplo,
username) e um valor (por exemplo,john_doe). - Clique no botão Criar .
- Um alerta deve confirmar a adição, e a tabela exibirá os novos dados.
- Insira uma chave (por exemplo,
-
Ler dados:
- Digite a chave que você acabou de adicionar (por exemplo,
username). - Clique no botão Ler .
- Um alerta exibirá a chave e seu valor associado.
- Digite a chave que você acabou de adicionar (por exemplo,
-
Atualizar dados:
- Insira a mesma chave (por exemplo,
username) e um novo valor (por exemplo,jane_doe). - Clique no botão Atualizar .
- Um alerta deve confirmar a atualização, e a tabela refletirá o novo valor.
- Insira a mesma chave (por exemplo,
-
Excluir dados:
- Digite a chave que deseja excluir (por exemplo,
username). - Clique no botão Excluir .
- Um alerta deve confirmar a exclusão, e os dados serão removidos da tabela.
- Digite a chave que deseja excluir (por exemplo,
-
Ver todos os dados:
- A tabela abaixo dos botões exibe todos os pares chave-valor.
- A tabela é atualizada automaticamente após cada operação.
Observação: os dados persistem mesmo se você atualizar a página ou fechar e reabrir o navegador, desde que o Armazenamento local não seja limpo.
Conclusão
Parabéns! Você criou com sucesso uma aplicação CRUD simples usando HTML5 e Armazenamento Local. Este projeto demonstra como você pode aproveitar o armazenamento do lado do cliente para criar aplicações web interativas e com estado, sem dependências do lado do servidor.
Principais conclusões:
-
Armazenamento local:
- Fornece uma maneira de armazenar dados localmente no navegador do usuário.
- Os dados persistem entre as sessões, a menos que sejam explicitamente apagados.
- Útil para salvar preferências do usuário, dados offline e muito mais.
-
Operações CRUD:
- Operações fundamentais para gerenciamento de dados.
- Implementado usando funções JavaScript simples.
-
Interface do usuário:
- Interface de usuário simples e intuitiva melhora a experiência do usuário.
- Atualizações em tempo real na exibição de dados mantêm os usuários informados.
Recursos adicionais
- Documentação da Web do MDN:
- Tutoriais W3Schools:
- Leitura adicional:
Sinta-se à vontade para expandir este projeto adicionando recursos como validação de dados, funcionalidade de pesquisa ou integrando-o com armazenamento do lado do servidor para uma aplicação full-stack. Boa programação! E me avisem em askpedromartins.com.
