用本地存储教你写ToDoList

古城微笑少年丶 2023-02-15 10:03 3阅读 0赞

### 本文用本地存储写一个简洁版的toDolist ###

本文核心知识点：

1.  本地存储的应用
2.  jQuery的事件、节点、元素应用
3.  JavaScript的基础应用

##### 没错又是它，我最爱toDolist，来吧，展示： #####

1.  功能：

*  文本框里面输入内容，按下回车，就可以生成待办事项。
 *  点击待办事项复选框，就可以把当前数据添加到已完成事项里面。
 *  点击已完成事项复选框，就可以把当前数据添加到待办事项里面。
 *  可以计算出完成与未完成任务的数量
 *  但是本页面刷新或重新打开页面，内容不会丢失。

1.  效果：  
    ![在这里插入图片描述][20200604210141134.gif]

### 1. 分析：toDoList 分析 ###

1. 刷新页面不会丢失数据，因此需要用到本地存储 localStorage
    2. 核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据
    3. 存储的数据格式：var todolist =  [{  title : ‘xxx’, done: false}]
    4. 注意点1： 本地存储 localStorage 里面只能存储字符串格式 ，因此需要把对象转换为字符串 JSON.stringify(data)。
    5. 注意点2： 获取本地存储数据，需要把里面的字符串转换为对象格式JSON.parse() 我们才能使用里面的数据。

### 2.1. 功能点：toDoList 按下回车把新数据添加到本地存储里面 ###

1.切记： 页面中的数据，都要从本地存储里面获取，这样刷新页面不会丢失数据，所以先要把数据保存到本地存储里面。
    2.利用事件对象.keyCode判断用户按下回车键（13）。
    3.声明一个数组，保存数据。
    4.先要读取本地存储原来的数据（声明函数 getData()），放到这个数组里面。
    5.之后把最新从表单获取过来的数据，追加到数组里面。
    6.最后把数组存储给本地存储 (声明函数 savaDate())

### 2.2. 功能点：toDoList 本地存储数据渲染加载到页面 ###

1.因为后面也会经常渲染加载操作，所以声明一个函数 load，方便后面调用
    2.先要读取本地存储数据。（数据不要忘记转换为对象格式）
    3.之后遍历这个数据（$.each()），有几条数据，就生成几个小li 添加到 ol 里面。
    4.每次渲染之前，先把原先里面 ol 的内容清空，然后渲染加载最新的数据。

### 2.3. 功能点：toDoList 删除操作 ###

1.点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。
    2.核心原理：先获取本地存储数据，删除对应的数据，保存给本地存储，重新渲染列表li
    3.我们可以给链接自定义属性记录当前的索引号
    4.根据这个索引号删除相关的数据----数组的splice(i, 1)方法
    5.存储修改后的数据，然后存储给本地存储
    6.重新渲染加载数据列表
    7.因为a是动态创建的，我们使用on方法绑定事件

### 2.4. 功能点：toDoList 正在进行和已完成选项操作 ###

1.当我们点击了小的复选框，修改本地存储数据，再重新渲染数据列表。
    2.点击之后，获取本地存储数据。
    3.修改对应数据属性 done 为当前复选框的checked状态。
    4.之后保存数据到本地存储
    5.重新渲染加载数据列表
    6.load 加载函数里面，新增一个条件,如果当前数据的done为true 就是已经完成的，就把列表渲染加载到 ul 里面
    7.如果当前数据的done 为false， 则是待办事项，就把列表渲染加载到 ol 里面

### 2.5. 功能点：toDoList 统计正在进行个数和已经完成个数 ###

1.在我们load 函数里面操作
    2.声明2个变量 ：todoCount 待办个数  doneCount 已完成个数   
    3.当进行遍历本地存储数据的时候， 如果 数据done为 false， 则 todoCount++, 否则 doneCount++
    4.最后修改相应的元素 text()

### 3. 完整js代码（注释清晰） ###

$(function() { 
        // 1.按下回车添加任务
        $("#title").on("keydown", function(e) { 
            if (e.keyCode === 13) { 
                // 对输入框进行空格判断
                if ($(this).val().trim().length == 0) { 
                    alert("请您输入内容")
                } else { 
                    // 读取本地存储
                    var local = getData();
                    // 追加最新任务到列表
                    // 因为是把数据放入本地存储，故追加时先把数据追加到数组，数组更新本地存储
                    local.push({ 
                        title: $(this).val(),
                        done: false
                    });
                    // 把local追加到本地
                    saveData(local);
                    load();
                    // 清空输入框内容
                    $(this).val("");
                }
            }
        });
    
        // 读取本地存储
        function getData() { 
            // 如果本地存储不为空，放回本地存储，否则返回空
            if (localStorage.getItem("todolist") != null) { 
                var data = localStorage.getItem("todolist");
                // 本地存储只支持字符串格式，我们存储时要把数组转换成字符串，读取时把字符串转换成对象
                return JSON.parse(data);
            } else { 
                return [];
            }
        };
        // 把最新追加数组的对象追加到本地
        function saveData(local) { 
            // 本地存储只支持字符串格式，我们存储时要把数组转换成字符串，读取时把字符串转换成对象
            localStorage.setItem("todolist", JSON.stringify(local));
        };
    
        // 渲染数据
        function load() { 
            // 读取数据
            var data = getData();
            // 每次添加渲染之前，删除上次渲染结果，防止重复渲染
            $("ul,ol").html("");
            // 计算完成与未完成的数量
            var nodoneCount = 0;
            var doneCount = 0;
            // console.log(data);
            // 遍历数组，依次渲染
            $.each(data, function(i, ele) { 
                // 如果完成添加进完成，否则反之
                if (ele.done) { 
                    // 生成li时，给li里面的a添加自定义属性index，方便删除与勾选的确认
                    $("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + " ></a></li>");
                    doneCount++;
                } else { 
                    $("ol").prepend("<li><input type='checkbox' > <p>" + ele.title + "</p> <a href='javascript:;' index=" + i + " ></a></li>");
                    nodoneCount++;
                }
            });
    
            // 把完成与未完成数量进行渲染
            $("#todocount").text(nodoneCount);
            $("#donecount").text(doneCount);
        };
        load();
    
        // 删除操作
        // 注意此处用on注册事件，因为li里面的a是动态创建的，无法用click选中
        $("ul,ol").on("click", "a", function() { 
            // 获取数据
            var data = getData();
            var index = $(this).attr("index");
            // console.log(index);
            // splice()数组方法，从第几个（索引）开始删除，删除几个
            data.splice(index, 1);
            // 删除后把数据存入本地存储（更新本地存储）
            saveData(data);
            // 进行页面重新渲染
            load();
        });
    
        // 任务状态切换
        // 注意此处用on注册事件，因为li里面的input是动态创建的，无法用click选中
        $("ul,ol").on("click", "input", function() { 
            var data = getData();
            // 此处没有为复选框添加自定义属性，但是他的兄的a含自定义属性，可用
            var index = $(this).siblings("a").attr("index");
            // 把索引号对应的数据状态与input的checked绑定
            data[index].done = $(this).prop("checked");
            console.log($(this).prop("checked"));
            // 更新本地存储
            saveData(data);
            // 重新渲染
            load();
        })
    })

**最后**：关于css，html部分可自由发挥，但要为动态创建的元素留插槽。

[20200604210141134.gif]: https://img-blog.csdnimg.cn/20200604210141134.gif