jquery实现toDolist—local storage的增删改查

一、实现效果

todolist
在这里插入图片描述

二、实现功能

输入框输入需要做的事件，回车后保存到本地local storage里面，渲染到页面
点击删除按钮清除local storage对应的数组值，并且重新渲染到页面
点击前面check单选框后，修改local里面储存的done值，并且判断后渲染到对应的地方
右边计数，定义变量，每次遍历local就+1，最后渲染到页面

三、核心函数与思路

1、每次增加、删除、修改数据都需要重新获取一次localstorage里面的数据

javascript">   // 获取本地数据
    function getDate() {
        let date = localStorage.getItem('todolist');
        if (date != null) {
            // 转换成对象类型
            return JSON.parse(date);
        } else {
            return [];
        }
    };

2、获取数据后，都将数据重新写入localstorage，记得每次要将对象转换成字符串保存到local里面

javascript">  // 将titel里面数据写入内存local
    function saveDate(date) {
        localStorage.setItem('todolist', JSON.stringify(date))
    }

3、重新渲染页面，在页面加载也需要调用一次渲染函数applyDate()，动态创建便签

javascript">function applyDate() {
        $("ul,ol").empty();
        let date = getDate();
        let todocount = 0;
        let donecount = 0;
        $.each(date, function(index, value) {
         
                if (!value.done) {
                    $("#todo ul").prepend("<li> <input type='checkbox'> <p>" + value.title + "</p> <a href = '#' id=" + index + "> <i class = 'fa fa-trash' aria-hidden = 'true'></i></a></li>")
                    todocount++;
                } else {
                    $("#done ol").prepend("<li> <input type='checkbox' checked = 'checked'> <p>" + value.title + "</p> <a href = '#' id=" + index + "> <i class = 'fa fa-trash' aria-hidden = 'true'></i></a></li>")
                    donecount++;
                }
            })
        $("#todocount").text(todocount);
        $("#donecount").text(donecount);
    }

附录：
HTML：

javascript"><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./todolist.css">
    <link rel="stylesheet" href="./img/font-awesome-4.7.0/css/font-awesome.min.css">
    <script crossorigin="anonymous" src="./js/jQuery.min.js"></script>
    <script crossorigin="anonymous" src="./js/todolist.js"></script>
    <title>toDoList</title>
</head>

<body>
    <div class="header">
        <div class="headermain">
            <p>ToDoList</p>
            <input type="text" placeholder="添加todo" id="title">
        </div>

    </div>
    <div class="contain">
        <div class="containmain">
            <div id="todo">
                <div class="todotext">
                    <h3>正在进行</h3>
                    <span id="todocount"></span>
                </div>
                <ul>
                </ul>
            </div>
            <div id="done">
                <div class="donetext">
                    <h3>已经完成</h3>
                    <span id="donecount"></span>
                </div>
                <ol>
                </ol>
            </div>
        </div>
    </div>
</body>

</html>

CSS：

* {
    margin: 0 auto;
    padding: 0 auto;
}

.header {
    height: 40px;
    width: 100%;
    background-color: black;
    text-align: center;
}

.header .headermain {
    width: 40%;
    height: 40px;
    display: flex;
}

body {
    background-color: #cccecb;
}

ul li,
ol li {
    list-style: none;
}

ul,
ol {
    padding: 0;
}

.header .headermain p {
    color: white;
    font-size: 20px;
    line-height: 40px;
    float: left;
}

.header .headermain input {
    width: 50%;
    height: 16px;
    outline: none;
    margin-top: 8px;
    margin-left: 180px;
    padding: 4px;
    border-radius: 2px;
    border: none;
}

.contain {
    /* text-align: center; */
    /* padding: 0; */
    margin: 0 auto;
}

.containmain {
    width: 40%;
    height: auto;
    /* border: 1px solid red; */
}

#todo ul li {
    padding: 0;
    width: 96%;
    height: 28px;
    background-color: white;
    border-radius: 2px;
    padding: 0 8px;
    margin-top: 12px;
    border-left: 4px solid #0a9aee;
    position: relative;
}

#done ol li {
    padding: 0;
    width: 96%;
    height: 28px;
    background-color: #e1e6e3;
    border-radius: 2px;
    padding: 0 8px;
    margin-top: 12px;
    border-left: 4px solid #0a9aee;
    position: relative;
}

#todo ul li input,
#done ol li input {
    /* display: block; */
    width: 14px;
    height: 14px;
    margin-top: 6px;
    float: left;
    background: black;
}

#todo ul li p,
#done ol li p {
    /* display: block; */
    float: left;
    margin-left: 20px;
    margin-top: 3px;
    display: flex;
}

#todo ul li a,
#done ol li a {
    position: absolute;
    right: 10px;
    color: #cfd1ce;
    margin-top: 2px;
}

.containmain h3 {
    margin-top: 20px;
    /* float: left; */
}

.todotext,
.donetext {
    position: relative;
    width: 100%;
    /* border: 1px solid red; */
    height: auto;
}

#todocount,
#donecount {
    background-color: #eaeceb;
    border-radius: 40%;
    width: auto;
    height: 20px;
    /* display: block; */
    text-align: center;
    padding: 1px 3px;
    font-size: 8px;
    position: absolute;
    right: 10px;
    bottom: 0px;
    /* display: flex; */
}

JS：

javascript">$(function() {
    // 页面输入回车后显示
    $("#title").on("keydown", function(e) {
        //兼容浏览器的事件
        let theEvent = e || window.event;
        //兼容各浏览器的键盘事件
        let keyCode = theEvent.keyCode || theEvent.which || theEvent.charCode;
        if (keyCode == 13) {
            // 1、获取本地数据  2、获取输入框的数据 3、将val数据写入数组 4、重新将数据保存在本地内存

            let titledate = $("#title").val();
            if (titledate != "") {
                let local = getDate();
                local.push({ title: titledate, done: false });
                saveDate(local);
                applyDate();
                $("#title").val("");

            } else {
                return false;
            }
        }
    })

    // 勾选复选框后到完成与未完成地方
    $("ul,ol").on("click", "input", function() {
        // console.log(1123);
        // console.log($(this).parent().index());
        let index = $(this).siblings("a").attr("id");
        // console.log(index);

        let date = getDate();
        // console.log(date[index]);
        date[index].done = $(this).prop("checked");
        saveDate(date);
        applyDate();

    })

    // 删除
    $("ol,ul").on("click", "a", function() {
        let index = $(this).attr("id");
        let date = getDate();
        // console.log($(this).parents("ul,ol").children().length);
        // console.log(index);
        // console.log(date);
        date.splice(index, 1);
        saveDate(date);
        applyDate(date);

    })

    // 获取本地数据
    function getDate() {
        let date = localStorage.getItem('todolist');
        if (date != null) {
            // 转换成对象类型
            return JSON.parse(date);
        } else {
            return [];
        }
    };

    // 将titel里面数据写入内存local
    function saveDate(date) {
        localStorage.setItem('todolist', JSON.stringify(date))
    }

    // 渲染页面
    applyDate();

    function applyDate() {
        $("ul,ol").empty();
        let date = getDate();
        let todocount = 0;
        let donecount = 0;
        $.each(date, function(index, value) {
                // console.log(value.done);
                // console.log(value);
                if (!value.done) {
                    $("#todo ul").prepend("<li> <input type='checkbox'> <p>" + value.title + "</p> <a href = '#' id=" + index + "> <i class = 'fa fa-trash' aria-hidden = 'true'></i></a></li>")
                    todocount++;
                } else {
                    $("#done ol").prepend("<li> <input type='checkbox' checked = 'checked'> <p>" + value.title + "</p> <a href = '#' id=" + index + "> <i class = 'fa fa-trash' aria-hidden = 'true'></i></a></li>")
                    donecount++;
                }
            })
            // console.log(todocount);
        $("#todocount").text(todocount);
        $("#donecount").text(donecount);
    }
})