Introdução
Neste Lab, acompanhamos Alex, um desenvolvedor web determinado em uma startup de tecnologia agitada, que agora se aventura no reino da persistência de dados. Após criar com sucesso um mecanismo para rastrear e exibir registros financeiros no rastreador de finanças pessoais, o próximo desafio é garantir que esses registros persistam em todas as sessões do navegador. O objetivo é permitir que os usuários retornem ao aplicativo e encontrem todos os seus dados inseridos anteriormente intactos, aprimorando a usabilidade e a satisfação do usuário. Esta tarefa apresenta a Alex o conceito de armazenamento web, especificamente aproveitando a API localStorage para salvar e recuperar o estado do aplicativo.
Neste Lab, você aprenderá como usar localStorage para armazenar dados localmente no navegador do usuário, permitindo a persistência de dados em aplicativos web.
Pontos de Conhecimento:
- Uso de
localStorage - Serialização e desserialização JSON (
JSON.stringify,JSON.parse)
LocalStorage
localStorage oferece um mecanismo para armazenar dados de sessão no lado do cliente, com limites de armazenamento geralmente em torno de 5MB. Ao contrário do armazenamento de sessão (sessionStorage), os dados em localStorage não desaparecem quando a sessão termina.
Armazenando Dados
O método setItem() permite que você armazene dados em localStorage. Este método recebe dois parâmetros: uma chave e um valor.
Por exemplo:
localStorage.setItem("username", "Alice");
Recuperando Dados
O método getItem() é usado para ler dados de localStorage. Este método recebe um parâmetro: a chave.
Por exemplo:
localStorage.setItem("username", "Alice");
let username = localStorage.getItem("username");
console.log(username); // Outputs: Alice
Salvando Registros no LocalStorage
Nesta etapa, você trabalhará com Alex para implementar a funcionalidade que salva o array de registros financeiros em localStorage sempre que um novo registro é adicionado. Isso garante que os dados do usuário sejam armazenados localmente em seu dispositivo, tornando-os disponíveis mesmo após o navegador ser fechado ou atualizado.
No início de script.js, antes de definir a função addFinancialRecord, adicione o seguinte código para carregar os registros salvos de localStorage e inicializar o array financialRecords:
Modifique o script.js para carregar registros de localStorage:
document.addEventListener("DOMContentLoaded", function () {
let records = JSON.parse(localStorage.getItem("records")) || [];
});
- O método estático
JSON.parse()analisa uma string JSON, construindo o valor ou objeto JavaScript descrito pela string. Uma função reviver opcional pode ser fornecida para realizar uma transformação no objeto resultante antes que ele seja retornado.
Implementar Persistência de Registros
Adicione a lógica para armazenar o registro em localStorage na função addRecord:
document.addEventListener("DOMContentLoaded", function () {
const saveRecords = () => {
localStorage.setItem("records", JSON.stringify(records));
renderRecords();
};
const addRecord = (description, amount, type) => {
records.push({ description, amount, type });
saveRecords();
};
});
Agora, toda vez que um novo registro financeiro for adicionado, ele será salvo em localStorage, garantindo a persistência dos dados.
Em seguida, precisamos implementar a função de exclusão da contabilidade. Antes de escrever a função de exclusão, precisamos aprender um novo método de operação de array.
Método Splice
O método splice() pode receber três parâmetros: a posição inicial, o número de elementos a serem excluídos e os novos elementos a serem adicionados.
Sintaxe:
array.splice(start, deleteCount, item1, item2, ...)
start: O índice a partir do qual começar a alterar o array.deleteCount: O número de elementos a serem removidos. Se nenhum elemento for removido, isso deve ser 0.item1, item2, ...: Novos elementos a serem adicionados ao array.
Removendo Elementos
Para remover elementos de um array, defina o parâmetro deleteCount sem precisar adicionar novos elementos.
let fruits = ["Apple", "Banana", "Cherry", "Date"];
fruits.splice(1, 2); // Remove 2 elementos a partir do índice 1
console.log(fruits); // Outputs: ['Apple', 'Date']
Adicionando Elementos
splice() também pode adicionar elementos em uma posição específica no array sem remover nenhum elemento. Defina deleteCount como 0 e especifique os elementos a serem adicionados.
let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(2, 0, "Date"); // Add 'Date' at index 2
console.log(fruits); // Outputs: ['Apple', 'Banana', 'Date', 'Cherry']
Substituindo Elementos
Ao definir deleteCount e adicionar novos elementos, splice() pode remover e adicionar elementos, substituindo-os efetivamente.
let fruits = ["Apple", "Banana", "Cherry"];
fruits.splice(1, 1, "Date"); // Replace 1 element at index 1 with 'Date'
console.log(fruits); // Outputs: ['Apple', 'Date', 'Cherry']
Adicionar a Capacidade de Excluir Registros
Adicionando a capacidade de excluir registros.
Escreva o seguinte código no arquivo script.js:
document.addEventListener("DOMContentLoaded", function () {
window.deleteRecord = (index) => {
records.splice(index, 1);
saveRecords();
};
});
Resumo
Neste laboratório, você e Alex enfrentaram o desafio da persistência de dados na aplicação de controle financeiro pessoal. Ao aprender a usar a API localStorage, você permitiu que a aplicação salvasse e recuperasse registros financeiros em diferentes sessões do navegador, aprimorando significativamente a experiência do usuário. Esta introdução ao armazenamento web abre novas possibilidades para a criação de aplicações web mais complexas e fáceis de usar.
Através da prática, você viu como os dados podem ser serializados para um formato de string usando JSON.stringify para armazenamento e, em seguida, desserializados de volta em objetos JavaScript usando JSON.parse para recuperação. Este processo é crucial para gerenciar o estado da aplicação no desenvolvimento web do lado do cliente, formando uma habilidade fundamental que auxiliará em seus futuros projetos de desenvolvimento web.
