jQuery-todoList本地存储的增删改查操作案例

$(function(){

    //1.按下回车 把数据先存储到本地存储里面

    //存储的数据格式 var todoList = [{title:"",done: false}]

    $("#title").on("keydown",function(e){

         if(e.keyCode === 13){

            if($(this).val() === ""){

                alert("请输入您要的操作")

            }else{

             //先读取本地存储原来的数据

             var local = getDate();

             //把local数组进行更新数据 把最新的数据追加给local数组

             local.push({title:$(this).val(),done: false})

             //把这个数组存储给本地存储

             saveDate(local);

             //2. todoList 渲染加载到页面

             load();

             $(this).val("");

            }

         }

    })

    //3. todoList 删除操作

    $("ol,ul").on("click","a",function(){

        //先获取本地存储

        var data =getDate();

        //修改数据

        var index = $(this).attr("id");

        //splice() 用于删除数组中的数据 里面两个参数 第一个是从第几个开始删  ，第二个是删几个

        data.splice(index,1);

        //保存到本地存储

        saveDate(data);

        //重新渲染页面

        load();

    })

    //4.todoList 正在进行和已经完成选项的操作

    $("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 [];

        }

    }

    //保存本地存储数据

    function saveDate(data){

        localStorage.setItem("todoList",JSON.stringify(data));

    }

    //每次页面刷新，渲染一下数据

    load();

    //渲染加载数据

    function load(){

        //读取本地存储的数据

        var data = getDate();

        //遍历之前先要清空ol里面的元素内容

        $("ul,ol").empty();

        var counting = 0; //正在进行的个数

        var countend = 0;//完成的个数

        //遍历这个数据

        $.each(data,function(i,ele){

            //如果done为true 则在ul里面 反之在ol里面

            if(ele.done){

                $("ul").prepend("<li><input type='checkbox' checked='checked'><p>"+ele.title+"</p><a href='javascript:;' id="+ i +"></a></li>")

                countend++;

            }else{

                $("ol").prepend("<li><input type='checkbox'><p>"+ele.title+"</p><a href='javascript:;' id="+ i +"></a></li>")

                counting++;

            }         

        })

        $("#todocount").text(counting);

        $("#donecount").text(countend);

    }

})