toDoList最简单待办事项案例的实现
需求分析：
① 文本框里面輸入內容，按下回車，就可以生成待辦事項。
② 點擊待辦事項復選框，就可以把當前數據添加到已完成事項里面。
③ 點擊已完成事項復選框，就可以把當前數據添加到待辦事項里面。
④ 但是本頁面內容刷新頁面不會丟失
① 刷新頁面不會丟失數據，因此需要用到本地存儲 localStorage
② 核心思路： 不管按下回車，還是點擊復選框，都是把本地存儲的數據加載到頁面中，這樣保證刷新關閉頁面不會丟失數據
③ 存儲的數據格式：var todolist = [{ title : ‘xxx’, done: false}]
④ 注意點1： 本地存儲 localStorage 里面只能存儲字符串格式 ，因此需要把對象轉換為字符串 JSON.stringify(data)。
⑤ 注意點2： 獲取本地存儲數據，需要把里面的字符串轉換為對象格式JSON.parse() 我們才能使用里面的數據
1.toDoList 按下回車把新數據添加到本地存儲里面
① 切記： 頁面中的數據，都要從本地存儲里面獲取，這樣刷新頁面不會丟失數據，所以先要把數據保存到本地存儲里面。
② 利用事件對象.keyCode判斷用戶按下回車鍵（13）。
③ 聲明一個數組，保存數據。
④ 先要讀取本地存儲原來的數據（聲明函數 getData()），放到這個數組里面。
⑤ 之后把最新從表單獲取過來的數據，追加到數組里面。
⑥ 最后把數組存儲給本地存儲 (聲明函數 savaDate())
// 保存本地存儲數據function saveDate(data) {localStorage.setItem("todolist", JSON.stringify(data));}2.toDoList 本地存儲數據渲染加載到頁面
① 因為后面也會經常渲染加載操作，所以聲明一個函數 load，方便后面調用
② 先要讀取本地存儲數據。（數據不要忘記轉換為對象格式）
③ 之后遍歷這個數據（$.each()），有幾條數據，就生成幾個小li 添加到 ol 里面。
④ 每次渲染之前，先把原先里面 ol 的內容清空，然后渲染加載最新的數據。
// 遍歷之前先要清空ol里面的元素內容$("ol").empty();3.toDoList 刪除操作
① 點擊里面的a鏈接，不是刪除的li，而是刪除本地存儲對應的數據。
② 核心原理：先獲取本地存儲數據，刪除對應的數據，保存給本地存儲，重新渲染列表li
③ 我們可以給鏈接自定義屬性記錄當前的索引號
④ 根據這個索引號刪除相關的數據----數組的splice(i, 1)方法，從i的位置開始刪除，刪除一位
⑤ 存儲修改后的數據，然后存儲給本地存儲
⑥ 重新渲染加載數據列表
⑦ 因為a是動態創建的，我們使用on方法綁定事件
4.toDoList 正在進行和已完成選項操作
① 當我們點擊了小的復選框，修改本地存儲數據，再重新渲染數據列表。
② 點擊之后，獲取本地存儲數據。
③ 修改對應數據屬性 done 為當前復選框的checked狀態。
④ 之后保存數據到本地存儲
⑤ 重新渲染加載數據列表
⑥ load 加載函數里面，新增一個條件,如果當前數據的done為true 就是已經完成的，就把列表渲染加載到 ul 里面
⑦ 如果當前數據的done 為false， 則是待辦事項，就把列表渲染加載到 ol 里面
5.toDoList 統計正在進行個數和已經完成個數
① 在我們load 函數里面操作
② 聲明2個變量 ：todoCount 待辦個數 doneCount 已完成個數
③ 當進行遍歷本地存儲數據的時候， 如果 數據done為 false， 則 todoCount++, 否則 doneCount++
④ 最后修改相應的元素 text()
整合js代碼：
$(function() {// alert(11);// 1. 按下回車 把完整數據 存儲到本地存儲里面// 存儲的數據格式 var todolist = [{title: "xxx", done: false}]load();$("#title").on("keydown", function(event) {if (event.keyCode === 13) {if ($(this).val() === "") {alert("請輸入您要的操作");} else {// 先讀取本地存儲原來的數據var local = getDate();// console.log(local);// 把local數組進行更新數據 把最新的數據追加給local數組local.push({ title: $(this).val(), done: false });// 把這個數組local 存儲給本地存儲saveDate(local);// 2. toDoList 本地存儲數據渲染加載到頁面load();$(this).val("");}}});// 3. toDoList 刪除操作$("ol, ul").on("click", "a", function() {// alert(11);// 先獲取本地存儲var data = getDate();console.log(data);// 修改數據var index = $(this).attr("id");console.log(index);data.splice(index, 1);// 保存到本地存儲saveDate(data);// 重新渲染頁面load();});// 4. toDoList 正在進行和已完成選項操作$("ol, ul").on("click", "input", function() {// alert(11);// 先獲取本地存儲的數據var data = getDate();// 修改數據var index = $(this).siblings("a").attr("id");console.log(index);// data[?].done = ?data[index].done = $(this).prop("checked");console.log(data);// 保存到本地存儲saveDate(data);// 重新渲染頁面load();});// 讀取本地存儲的數據 function getDate() {var data = localStorage.getItem("todolist");if (data !== null) {// 本地存儲里面的數據是字符串格式的 但是我們需要的是對象格式的return JSON.parse(data);} else {return [];}}// 保存本地存儲數據function saveDate(data) {localStorage.setItem("todolist", JSON.stringify(data));}// 渲染加載數據function load() {// 讀取本地存儲的數據var data = getDate();console.log(data);// 遍歷之前先要清空ol里面的元素內容$("ol, ul").empty();var todoCount = 0; // 正在進行的個數var doneCount = 0; // 已經完成的個數// 遍歷這個數據$.each(data, function(i, n) {// console.log(n);if (n.done) {$("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");doneCount++;} else {$("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p> <a href='javascript:;' id=" + i + " ></a></li>");todoCount++;}});$("#todocount").text(todoCount);$("#donecount").text(doneCount);} })總結
以上是生活随笔為你收集整理的toDoList最简单待办事项案例的实现的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux下获取错误码并打印
- 下一篇： 北~京