用jquery实现记事本

   html

 <header>
        <section>
            <label for="title">ToDolist</label>
            <input type="text" id="title" placeholder="添加想要记录得事哦！" required="required" autocomplete="off" />
        </section>
    </header>
    <section class="lj">
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todolist" class="demo-box">

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

        </ul>
    </section>

css得布局

       @font-face {
            font-family: 'icomoon';
            src: url('./fonts/icomoon.eot?a0043i');
            src: url('./fonts/icomoon.eot?a0043i#iefix') format('embedded-opentype'),
                url('./fonts/icomoon.ttf?a0043i') format('truetype'),
                url('./fonts/icomoon.woff?a0043i') format('woff'),
                url('./fonts/icomoon.svg?a0043i#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }

        * {
            padding: 0;
            margin: 0;
        }

        body {
            background-image: linear-gradient(to right, #7A88FF, #7AFFAF);
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        header section {
            width: 100%;
            height: 50px;
            background-color: rgb(128, 212, 187);
            text-align: center;
            line-height: 48px;
        }

        input {

            width: 400px;
            height: 20px;
            border-radius: 8px;
            padding-left: 10px;
        }

        label {
            color: rgb(7, 6, 5);
            font-size: 20px;
            margin-left: -174px;
        }

        .lj {
            margin-left: 400px;
            position: absolute;

        }

        .lj h2 {
            margin-top: 20px;
            margin-bottom: 10px;
        }

        .lj li {
            position: relative;
            width: 600px;
            height: 30px;
            border: 1px solid black;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 5px solid #2f45be;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
        }

        .lj input {
            position: absolute;
            width: 20px;
            left: 7px;
            top: 4px;

        }

        a {
            font-family: 'icomoon';
            position: absolute;
            font-size: 20px;
            top: 4px;
            left: 580px
        }

        .lj p {
            margin-top: 5px;
            margin-left: 30px;
        }

        footer {
            text-align: center;
            margin-top: 200px;
        }

        @media screen and (max-device-width: 620px) {
            section {
                width: 96%;
                padding: 0 2%;
            }
        }

        @media screen and (min-width: 620px) {
            section {
                width: 600px;
                padding: 0 10px;
            }
        }

jquery得运行

$(function(){
    load();
    $("#title").on("keydown", function(event) {
        if (event.keyCode === 13) {
            //    先读取本地存储原来的数据
                var local = getDate();
                 console.log(local);
                // 把local数组进行更新数据 把最新的数据追加给local数组
                 local.push({ title: $(this).val(), done: false });
                // // 把这个数组local 存储给本地存储
                 saveDate(local);
                 load();
            }
    });
    $("ol").on("click","a",function(){//给a添加点击事件
        var data=getDate();//取到本地数据
        console.log(data);
        var index=$(this).attr("id");  //点击这个a获取id的索引号
        console.log(index);
        data.splice(index,1)//删除点击的内阁Li
        saveDate(data);//保存数据

        load();//渲染效果
    })
//
  $("ol,ul").on("click","input",function(){
    var data=getDate();
    var index=$(this).siblings("a").attr("id");
    data[index].done=$(this).prop("checked");
    saveDate(data);
    load();
})
    function getDate() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
            return JSON.parse(data);
        } else {
            return [];
        }
    }hzua
     function saveDate(data) {
        localStorage.setItem("todolist", JSON.stringify(data));//把本地数据转换为字符串类型储存
    }
    function load(){
        var data=getDate();//先得到本地数据
        console.log(data);
        $("ol,ul").empty();//清空小li得内容
        $.each(data,function(i,n){  //遍历以前的数据
            if(n.done){
                //如果是false得话就是把li p a 添加到ul 否则就是ol
            $("ul").prepend("<li><input type='checkbox' checked='checked'><p>"+n.title+"</p><a href='javascript:;' id="+i+"></a></li>")
            }else{
            $("ol").prepend("<li><input type='checkbox'><p>"+n.title+"</p><a href='javascript:;' id="+i+"></a></li>")
            }
        })
    }
})