ToDoList你值得擁有 ??-有解無憂

專案介紹：

ToDoList無須注冊即可使用，資料存盤在用戶瀏覽器的html5本地資料庫里，是最簡單最安全的待辦事項串列應用！，這個專案有很多細節的地方，比如如何存盤資料到本地、頁面重繪如何讓資料實時更新、存盤資料的格式，這個是一個很典型的案例，前端的同學要好好的掌握，可以鍛煉邏輯思維

專案效果展示：

功能介紹：

在表單里面輸入內容，按回車鍵添加到正在進行里面
根據表單里面的復選框的狀態，為true時，就存盤到正在進行里面；為false時，就存盤到已經完成里面，
右上角數字是實時記錄里面有多少天內容
點擊每個內容后面的圓圈，就洗掉當前的內容同時也將本地存盤的相應的內容洗掉，

涉及的知識點：

本地存盤 window.localStorage

優點：生命周期永久生效，除非手動洗掉否則關閉頁面也會存在；可以多視窗共享同一瀏覽器共享；以鍵值隊的形式存盤使用

jquery的樣式操作、添加洗掉節點
按鍵功能 keydown

頁面布局：

ol是存放正在進行的內容；ul是存放已經完成的內容

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo" required="required" autocomplete="off" />
        </section>
    </header>
    <section>
        <h2>正在進行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">

        </ol>
        <h2>已經完成 <span id="donecount"></span></h2>
        <ul id="donelist">

        </ul>
    </section>
    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>

</body>

頁面渲染部分：

引入相關的js檔案

第一個是jQuery檔案

第二個是自己鍵的js檔案

在開始打代碼的時候要想清楚需要實作的功能，最基本的就是存盤資料和獲取本地資料以及將資料渲染到頁面中，在整個程式中，多處用到存盤和獲取，比如在頁面重繪的時候會獲取本地本地資料渲染到頁面中，這時最簡單的方法就是呼叫封裝好的函式，我們將這三個實作分別用函式封裝起來，需要使用就呼叫即可，

將資料保存到本地

這里有個知識點很多同學都會忽視，

localStorage.setItem()

由于次方法存盤是將通過存盤字串的方式存盤資料的

但是形參傳遞過來的是以物件的形式定義的屬性，所以通過JSON.stringfy(data) 將data物件轉換為字串，以字串的形式存盤

    //保存本地存盤資料
    function savaData(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }

讀取本地存盤的資料

localStorage.getItem("todolist")

道理和存盤資料一樣，取出的資料需要將字串轉換為陣列的形式

通過 JSON.parse(data)的方式回傳的資料是陣列格式

function getData() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            return JSON.parse(data); //將字串格式轉換成陣列格式 獲取過來的資料
        } else {
            return [];
        }
    }

頁面渲染加載

頁面渲染顧名思義就是將從本地獲取的資料渲染到頁面中，呈現出來

遍歷資料的方法each.()；里面有兩個引數，第一個引數索引號，第二個是物件屬性值，因為這里遍歷的是我們我們追加的資料，

里面的兩個變數就是右上角的計數，這個大家都能看懂就不細講了哈

 function load() {
        var todoConut = 0;
        var doneConut = 0;
        //先讀取本地存盤的資料
        var data = getData();
        // console.log(typeof data);//物件
        //在遍歷資料時先把ol里面的資料清空 就不會重新添加顯示
        $("ol,ul").empty();
        //遍歷資料
        $.each(data, function (i, ele) {
            if (ele.done) {
                doneConut++;
                $("ul").prepend("<li><input type ='checkbox' checked='checked'><p>" + ele.title + "</p><a href ='javascript:;' id =" + i + "></a></li>")
            } else {
                todoConut++;
                $("ol").prepend("<li><input type ='checkbox' ><p>" + ele.title + "</p><a href ='javascript:;' id =" + i + "></a></li>")
            }
        })
        $("#todocount").text(todoConut);
        $("#donecount").text(doneConut);
    }

基本實作流程

jQuery入口函式 $(function(){ })

當用戶按下回車鍵將表單里的資料保存到本地，當然當我們頁面一加載的時候，就講本地資料渲染到頁面，就在開頭呼叫一次load()事件，用事件物件判斷用戶按下的是不是回車鍵，如果表單內容不為空，就先將我們之前的本地資料獲取過來，再在后面將表單里面的資料獲取過來追加給local，追加的資料是物件的形式，第一個title是獲取的表單里面的值，val()方法獲取，第二個屬性是為了判斷它是正在進行還是已經完成，開始追加的值是正在進行的所以是初始值是false，然后再將新的資料存盤到本地，再一次渲染到頁面中直接呼叫load函式即可，那么將用戶的內容渲染到頁面中就完成啦
 //頁面一加載就渲染到頁面
    load();
    //用戶按下回車鍵就存盤到本地
    $("#title").on("keydown", function (e) {
        if (e.keyCode === 13) {
            if ($(this).val() == "") {
                alert("請輸入內容");
            } else {
                var local = getData();
                //把最新的資料追加給local
                local.push({ title: $(this).val(), done: false });   //done表示資料沒有完成
                //把這個陣列local 存盤給本地存盤
                savaData(local);
                //將本地存盤的資料渲染到頁面中
                load();
                $(this).val("");
            }
        }
    })
我們再來實作點擊a洗掉當前的那行內容，分別為正在進行和已經完成里面的a系結一個點擊事件，僅從洗掉，首先要將本地資料獲取過來，將a的索引號獲取過來，實作點擊a時，洗掉的是a所在的當前行，因為獲取過來的資料是陣列的形式，通過splice洗掉陣列里面的資料,splice里面的第一個引數是從哪一個索引號開始洗掉，第二個引數是洗掉的個數，，此時我們只需要洗掉當前的那個物件，那么第二個引數就是1，再將修改完后的資料保存到本地，再將新的資料渲染到頁面中
//點擊 a 洗掉操作
    $("ol,ul").on("click", "a", function () {
        //先獲取本地存盤
        var data = getData();
        //修改資料
        var index = $(this).attr("id") //獲取點擊a的索引號
        data.splice(index, 1); //洗掉資料中第index個元素
        //保存到本地存盤
        savaData(data)
        //重新渲染頁面
        load();
    });
最后一個模塊，將我們的內容分類，老規矩，將本地資料獲取過來，因為表單表單和a是兄弟關系，那么就不需要再給表單設定索引了，直接講a的索引號獲取過來即可，物件里的第二個引數就起作用咧，將我們的表單復選框的狀態賦給done，此時如果表單的狀態發生變化的話，就會將相應的true或false賦值給當前資料的done屬性，用來頁面渲染時，對內容的分類，呼叫load函式，如果done里面的值時true，則在已經完成里面的ul里面添加li以及獲取表單資料；如果done的值是false，則在ol里面完成相應的操作即可
    //正在進行和已完成的選項操作
    $("ol,ul").on("click", "input", function () {
        var data = getData();
        var index = $(this).siblings("a").attr("id");//它兄弟a的索引號就是它的 點擊的復選框的索引號
        data[index].done = $(this).prop("checked");  //復選框的狀態就是done的狀態
        //保存到本地存盤
        savaData(data);
        //重新渲染頁面
        load();
    })

整個專案大致如此，沒有看懂就call我

別忘啦三步曲喲：點贊👍 評論 ?? 收藏 🌟

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/323465.html

標籤：其他

上一篇：React 表格內自定義組件不進行實時更新，采用更新key方式實時更新組件，以及直接變更開關 defaultChecked 為 checked 狀態實作表格組件更新

下一篇：js面試題--變數型別和計算