Bayangkan Anda sedang menulis task manager. Aplikasi harus berfungsi sebagai asli: bekerja offline maupun online.
Konsep dasar
Alat utama kami dalam membangun aplikasi semacam itu adalah penyimpanan lokal.
Saya tidak terbiasa dengan cara lain untuk mengimplementasikan ini. Cara saya akan bercerita tentang Anda diciptakan sendiri dan menurut saya berhasil.
Bagaimana cara kerjanya?
Jadi, kami memiliki daftar tugas:
<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>
Kita perlu menyimpan dan memperbarui teks tugas dan status selesai / tidak, dan juga menerapkan penambahan tugas baru.
Kami akan membuat kunci acak untuk setiap tugas dan menggunakannya sebagai pengidentifikasi untuk setiap informasi terkait yang tersimpan di penyimpanan lokal. Secara analogi, ini tampak seperti basis data.
Di mana untuk memulai?
Pertama-tama, kita akan melihat apakah sudah ada tugas dalam memori. Semua kunci akan disimpan dalam satu baris
const savedTokens = localStorage.getItem('tokens'); const root = document.querySelector('.tasks'); let tokens = []; if (savedTokens != null) { tokens = savedTokens.split(', ');
Kami akan berurusan dengan penambahan tugas baru sejauh ini untuk memahami konsep penyimpanan dan penggunaan data yang disimpan.
Ketika Anda mengklik pada menambahkan tugas, Templat tugas akan muncul dalam daftar, teks tugas dapat diedit. Sekarang Anda perlu menjelaskan semua ini.
Mari kita membuat fungsi yang membuat elemen dengan kontennya menggunakan data yang ditransfer padanya.
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; }
Kami menjelaskan peristiwa untuk tombol dan untuk mengedit tugas:
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); });
Kami menerapkan fungsi yang hilang, updateEvent dan 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); }
Hebat! Kami menerapkan penambahan tugas dan menyimpannya di Penyimpanan lokal. Tetap menyimpulkan tugas yang sudah disimpan.
Output tugas yang disimpan
Untuk menampilkan tugas, cukup untuk mendapatkan semua kunci, parsing, tarik keluar teks tugas dan statusnya untuk setiap tombol. Selanjutnya, kita cukup membuat setiap tugas di root: kita mendapatkan tugas menggunakan getTemplate dan menempelkannya ke 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); });
Secara umum, task manager kami yang paling sederhana sudah siap. Masih mengumpulkan semua dalam tumpukan.
Manajer Tugas Kerja tersedia di sini .