本地存储案例

$(function(){
    xr();
    $("#txt").on("keydown",function(e){
        if(e.keyCode===13){
            // 获取本地存储的数据，赋值给一个数组local
            var local=getData();
            // 回车后 数组中新增文本框内容
            local.push({title:$(this).val(),done:false});
            // console.log(local[0].title);
            // 新的数组 重新保存到本地存储 调用函数saveDate()
            saveDate(local);
            // console.log(local);
            // 把本地的数据渲染到页面中
            xr(); 
            // 把文本框清空
            $("#txt").val("");
        }
    });
    //获取本地存储的数据
    function getData(){
        var data=localStorage.getItem("todolist");
        if(data !== null){
            // data是字符串型，需要修改成数组型
            // return data;
            return JSON.parse(data);  // 把字符串型改成数组型返回
         }else{
            return [];
        }
    }
    //保存更新后的数组
    function saveDate(data){
        //本地保存 只接受字符串类型，data是数组型，需要修改为字符串类型
        localStorage.setItem("todolist",JSON.stringify(data));
    }
    // 把本地数据渲染到页面中
    function xr(){
        var data=getData();
        var dbcount=0;
        var wccount=0;
        $("ol,ul").empty();
        $.each(data,function(i,n){
            if(n.done){
                $("ul").prepend("<li><input type='checkbox' checked><p>"+n.title+"</p><a href='javascript:;' id="+i+">删除</a></li>");
                wccount++;
            }else{
                $("ol").prepend("<li><input type='checkbox'><p>"+n.title+"</p><a href='javascript:;' id="+i+">删除</a></li>");
                dbcount++;
            }            
        })
        $(".db").html(dbcount);
        $(".wc").text(wccount);
    }
    // 1.删除
    $("ol,ul").on("click","a",function(){
        //获取本地存储数据
        var data = getData();
        //获取自定义的索引号
        var idx=$(this).attr("id");
        //删除数组
        data.splice(idx,1);
        //保存数组
        saveDate(data);
        // 渲染页面
        xr();
    })
    // 2.切换
    $("ol,ul").on("click","input",function(){
        // 先获取本地数组
        var data = getData();
        //修改本地存储数据
        //    先获取索引号
        var idx=$(this).siblings("a").attr("id");
        //   修改数组中第 idx 个元素的 done的值
        data[idx].done = $(this).prop("checked");
        console.log(data);
        //保存修改后的数组;
        saveDate(data);
        //重新渲染数组
        xr();
    })
});


HTML:


        <input type="text" id="txt"><br>
        <h2>待办事项：</h2><span class="db"></span>
        <ol></ol>
        <h2>完成事项：</h2><span class="wc"></span>
        <ul></ul>