用JQuery实现todolist记录清单（包含本地存储）案例

VillanelleS

已于 2022-04-08 21:34:51 修改

阅读量775

点赞数

文章标签： jquery html5 css

于 2022-04-08 21:32:07 首次发布

本文链接：https://blog.csdn.net/qq_34306228/article/details/124051139

版权

用JQuery实现todolist记录清单（包含本地存储）案例

步骤
全部代码
成果展示

步骤

刷新页面，不会丢失数据，因此需要用到本地存储localStorage
数据先放到本地存储中，再渲染css
存储数据格式：本地存储只能存储字符串的数据格式
数组对象转换成字符串格式 JSON.stringify()

localStorage.setItem("todo",JSON.stringify(todolist));

获取本地存储的数据，我们需要把里面的字符串数据转换为对象格式 JSON.parse()

var data=localStorage.getItem("todo");
data=JSON.parse(data);

以往都是把数据保存在内存中，刷新后数据会被清空

todolist按下回车把新数据添加到本地存储中，回车键的值为13

          $(".todo").on("keydown",function(event){
                if(event.keyCode===13)
                {}
            });

在许多时候都需要先读取本地数据，因此将其封装成一个函数

function getData(){
       var data=localStorage.getItem("todolist");
       if(data!==null)
       {
           return JSON.parse(data);
       }
       else{
           return [];
       }
   }

保存本地存储数据

function saveData(data){
   localStorage.setItem("todolist",JSON.stringify(data));
}

渲染加载数据

function load(){
       var data=getData();
       $("ul,ol").empty();
       var doingCount=0;
       var doneCount=0;
       $.each(data,function(i,e){
           if(e.done)
           {
               doneCount++;
               $("ol").prepend("<li><input type='checkbox' checked='checked'><p>"+e.title+"</p><a href='javascript:;'' id="+i+">-</a></li>");
           }
           else{
               doingCount++;
               $("ul").prepend("<li><input type='checkbox'><p>"+e.title+"</p><a href='javascript:;'' id="+i+">-</a></li>");
           }
       })
       $(".doingcount").text(doingCount);
       $(".donecount").text(doneCount);
   }

全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="javascript/jquery.min.js"></script>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    header{
        height: 50px;
        background: rgba(47,47,47,0.98);
    }
    section{
        width: 600px;
        margin: 0 auto;
        color: #ccc;
        padding-top: 10px;
    }
    .title{
        float: left;
    }
    .todo{
        width: 60%;
        height: 24px;
        float: right;
        border-radius: 5px;
        text-indent: 10px;
        box-shadow: 0 1px 0 rgba(255,255,255,0.14), 0 1px 6px rgba(0,0,0,0.35) inset;
        outline: none;
    }
    body{
        background: #cdcdcd;
    }
    .main{
        width: 600px;
        margin: 0 auto;
    }
    .doing-list{
        margin: 20px 0;
    }
    .done-list{
        margin: 20px 0;
    }
    .doingcount,
    .donecount{
        float: right;
        background-color: #fff;
        background: #e6e6fa;
        border-radius: 10px;
        padding: 0 5px;
        height: 20px;
        line-height: 20px;
        color: #666;
        margin-top: -30px;
        font-size: 14px;
        font-weight: 500;
    }
    ol,
    ul{
        list-style: none;
    }
    ul li{
        height: 35px;
        background-color: #fff;
        margin-top: 10px;
        border-left: 5px solid #629a9c;
        border-radius: 4px;
        line-height: 35px;
    }
    li input{
        margin: 0 15px;
        font-size: 30px;
    }
    li a{
        text-decoration: none;
        color: #fff;
        float: right;
        width: 14px;
        height: 12px;
        background-color: #ccc;
        margin: 5px 10px;
        line-height: 10px;
        border-radius: 14px;
        border: 6px double #fff;
        text-align: center;
        font-weight: bold;
        font-size: 14px;
    }
    ol li{
        height: 35px;
        background-color: #fff;
        margin-top: 10px;
        border-left: 5px solid #999;
        border-radius: 4px;
        line-height: 35px;
        opacity: 0.5;
    }
    footer{
        margin: 10px;
        color: #666;
        font-size: 14px;
        text-align: center;
    }
    .clear{
        text-decoration: none;
        color: #999;
    }
    li p{
        display: inline-block;
    }
</style>
<body>
    <header>
        <section>
            <h2 class="title">ToDoList</h2>
            <input type="text" class="todo" placeholder="添加ToDo">
        </section>
    </header>
    <div class="main">
        <div class="doing-list">
            <h2 class="doing">正在进行</h2>
            <div class="doingcount">0</div>
        </div>
        <ul>
        </ul>
        <div class="done-list">
            <h2 class="done">已经完成</h2>
            <div class="donecount">0</div>
        </div>
        <ol>
        </ol>
    </div>
    <footer> 
        Copyright © 2020 localhost
        <a href="javacript:;" class="clear">clear</a>
    </footer>
    <script>
        $(function(){
            load();
            $(".todo").on("keydown",function(event){
                if(event.keyCode===13)
                {
                    if($(this).val()=="")
                    {
                        alert("请输入你要的操作");
                    }
                    else{
                         // 先读取本地数据
                    var local=getData();
                    // console.log(local);
                    local.push({title:$(this).val(),done:false});
                    saveData(local);
                    load();
                    $(this).val("");
                    }
                }
            });
        
            $("ul,ol").on("click","a",function(){
                var data=getData();
                var index=$(this).attr("id");
                // console.log(index);
                data.splice(index,1);
                saveData(data);
                load();
            });
            $("ul,ol").on("click","input",function(){
                var data=getData();
                var index=$(this).siblings("a").attr("id");
                data[index].done=$(this).prop("checked");
                saveData(data);
                load();
            })
            $(".clear").on("click",function(){
                var data=getData();
                data.splice(0,data.length);
                saveData(data);
                load();
            })


            function getData(){
                var data=localStorage.getItem("todolist");
                if(data!==null)
                {
                    return JSON.parse(data);
                }
                else{
                    return [];
                }
            }
            
            function saveData(data){
                localStorage.setItem("todolist",JSON.stringify(data));
            }

            function load(){
                var data=getData();
                $("ul,ol").empty();
                var doingCount=0;
                var doneCount=0;
                $.each(data,function(i,e){
                    if(e.done)
                    {
                        doneCount++;
                        $("ol").prepend("<li><input type='checkbox' checked='checked'><p>"+e.title+"</p><a href='javascript:;'' id="+i+">-</a></li>");
                    }
                    else{
                        doingCount++;
                        $("ul").prepend("<li><input type='checkbox'><p>"+e.title+"</p><a href='javascript:;'' id="+i+">-</a></li>");
                    }
                })
                $(".doingcount").text(doingCount);
                $(".donecount").text(doneCount);
            }

        });


    </script>
</body>
</html>