假设您正在编写任务管理器。 该应用程序应以本机模式运行：既可以离线运行又可以在线运行。
基本概念
构建此类应用程序的主要工具是本地存储。
我不熟悉其他实现此方法的方法。 我要告诉您的方法是我自己发明的，对我来说似乎很成功。
如何运作？
因此，我们有一个任务列表：
<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>
我们需要存储和更新任务的文本，状态为已完成/未完成，并且还实现了新任务的添加。
我们将为每个任务生成一个随机密钥，并将其用作本地存储中每个相关存储信息的标识符。 以此类推，它看起来像一个数据库。
从哪里开始？
首先，我们将查看内存中是否已经有任何任务。 所有密钥将存储在一行中
const savedTokens = localStorage.getItem('tokens'); const root = document.querySelector('.tasks'); let tokens = []; if (savedTokens != null) { tokens = savedTokens.split(', ');
到目前为止，我们将处理一项新任务，以了解存储和存储数据的使用概念。
当您单击添加任务时，任务模板将出现在列表中，可以编辑任务文本。 现在您需要描述所有这一切。
让我们创建一个函数，该函数使用传递给它的数据来创建元素及其内容。
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; }
我们描述按钮事件和编辑任务的事件：
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); });
我们实现了缺少的功能updateEvent和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); }
太好了！ 我们实现了添加任务并将其保存在localStorage中。 剩下的结论就是要完成已经保存的任务。
输出保存的任务
要显示任务，只需获取所有键，解析它们，为每个键拉出任务文本及其状态就足够了。 接下来，我们仅在根目录中创建每个任务：我们使用getTemplate获取任务并将其粘贴到根目录中。
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); });
通常，我们最简单的任务管理器已准备就绪。 它仍然可以收集所有内容。
工作任务管理器在此处可用 。