Imagine que você está escrevendo um gerenciador de tarefas. O aplicativo deve funcionar como nativo: trabalhe offline e online.
Conceito básico
Nossa principal ferramenta na criação de um aplicativo como esse é o armazenamento local.
Não estou familiarizado com outras maneiras de implementar isso. O método que falarei sobre você foi inventado por mim e me pareceu bem-sucedido.
Como vai funcionar?
Portanto, temos uma lista de tarefas:
<ul class="tasks"> <li class="task"> <p class="task__text" contenteditable="true">Eggs</p> <input type="checkbox"> </li> <li class="task"> <p class="task__text" contenteditable="true">Breads</p> <input type="checkbox"> </li> </ul> <button class="task__add-btn" type="button">New task</button>
Precisamos armazenar e atualizar o texto da tarefa e o status é concluído / não e também implementar a adição de uma nova tarefa.
Geraremos uma chave aleatória para cada tarefa e a usaremos como um identificador para cada informação armazenada relacionada no armazenamento local. Por analogia, parece um banco de dados.
Por onde começar?
Primeiro, veremos se já existem tarefas na memória. Todas as chaves serão armazenadas em uma linha
const savedTokens = localStorage.getItem('tokens'); const root = document.querySelector('.tasks'); let tokens = []; if (savedTokens != null) { tokens = savedTokens.split(', ');
Lidaremos com a adição de uma nova tarefa até agora para entender o conceito de armazenamento e uso de dados armazenados.
Quando você clica em adicionar uma tarefa, um modelo de tarefa aparece na lista, o texto da tarefa pode ser editado. Agora você precisa descrever tudo isso.
Vamos criar uma função que cria um elemento com seu conteúdo usando os dados transferidos para ele.
function getTemplate(token, data) { const task = document.createElement('li'); task.classList.add('task'); task.setAttribute('data-token', token); task.innerHTML = ` <p class="task__text" contenteditable="true">${data.text}</p> <input type="checkbox" ${data.input == 'true' ? 'checked' : ''}> `; return task; }
Descrevemos os eventos para o botão e para editar a tarefa:
const btnAddTask = document.querySelector('.task__add-btn'); btnAddTask.addEventListener('click', function(e) { e.preventDefault(); const newToken = randomToken(); tokens.push(newToken); const taskData = { text: 'Task`s title', input: false }; root.appendChild(getTemplate(newToken, taskData)); updateTokens(); updateEvent(newToken); });
Implementamos as funções ausentes updateEvent e randomToken.
function updateEvent(token) { const task = root.querySelector(`[data-token="${token}"]`); const text = task.querySelector(`.task__text`); const input = task.querySelector(`input`); localStorage.setItem(`text-${token}`, text.innerHTML); localStorage.setItem(`input-${token}`, input.checked); text.addEventListener('input', function() { localStorage.setItem(`text-${token}`, text.innerHTML); }); input.addEventListener('click', function() { localStorage.setItem(`input-${token}`, input.checked); }); } function updateTokens() { localStorage.setItem('tokens', tokens.join(', ')); } function randomToken() { return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15); }
Ótimo! Implementamos a adição de tarefas e as salvamos no localStorage. Resta concluir a tarefa que já foi salva.
Tarefa salva de saída
Para exibir a tarefa, basta obter todas as chaves, analisá-las e extrair o texto da tarefa e seu status para cada chave. Em seguida, simplesmente criamos cada tarefa no root: obtemos a tarefa usando getTemplate e colamos no root.
tokens.forEach(function(token) { const text = localStorage.getItem(`text-${token}`); const input = localStorage.getItem(`input-${token}`); root.appendChild(getTemplate(token, { text: text, input: input })); updateEvent(token); });
Em geral, nosso gerenciador de tarefas mais simples está pronto. Resta coletar tudo em uma pilha.
O Work Task Manager está disponível aqui .