原生js实现todolist案例

html代码：

部分css代码：

 js代码：

var title = document.getElementById('title');
var todolist = document.getElementById('todolist');
var donelist = document.getElementById('donelist');
var todocount = document.getElementById('todocount');
var donecount = document.getElementById('donecount');
load()
//回车把输入的数据存储到本地
title.addEventListener('keydown', function(e) {
    var arr = getData();
    if (e.key == 'Enter') {
        var todo = {
            title: title.value,
            done:false
        }
        arr.push(todo)
        saveData(arr)
        load()
        this.value = ''
    }
})
 
// 给ol添加点击事件
todolist.addEventListener('click', function (e) {
    // 调用编辑数据函数
    edit(e)
    // 调用删除数据函数
    remove(e)
    change(e)
})
// 给ul添加点击事件
donelist.addEventListener('click', function (e) {
    remove(e)
    change(e)
})
 
// 读取本地的数据，为删除,修改,渲染提供方法
function getData(){
    // 把json格式的字符串转换成了JSON对象。
   var data = localStorage.getItem('todo')
   if(data != null){
        return JSON.parse(data);
   }else{
        return [];
   }
}
 
// 存储数据,当删除，修改，渲染，完成之后，更新数据
function saveData(tdlist){
    // 把获得的对象转换成 JSON 字符串形式储存
    localStorage.setItem('todo',JSON.stringify(tdlist));
}
 
// 加载数据，渲染到页面
function load(){
    // 每次调动都清空ol ul 中的内容，防止出现之前的数据
    todolist.innerHTML = ''
    donelist.innerHTML = ''
    var tocount = 0;
    var docount = 0;
    // 获得存储的最新数据
    var data = getData();
    // 循环存储的数据渲染到页面
    data.forEach((item, index) => {
        // 创建li
        var li = document.createElement('li');
        // 判断复选框是非选中
        if(item.done){
            // 选中的话添加到已完成事项中
            li.innerHTML = `
${item.title}
${index}>`;
            // 把li添加到前面
            donelist.insertBefore(li, donelist.children[0]);
            // 计数
            docount++;
        }else{
            li.innerHTML = `
${index}">${item.title}
${index}>`;
            todolist.insertBefore(li, todolist.children[0]);    
            tocount++;
        }
    });
    todocount.innerHTML = tocount;
    donecount.innerHTML = docount;
}
// 编辑数据
function edit(e){
    if(e.target.nodeName == 'P'){
        // 当点击p标签时，添加一个ipt框
        e.target.innerHTML = `${e.target.innerHTML}" id="ipt${e.target.id}">`;
        // 当鼠标获取焦点后全选ipt框中的内容
        e.target.children[0].select();
        // 鼠标失去焦点后，获取修改后的数据重新储存，并渲染
        e.target.children[0].addEventListener('blur', function() {
            var data = getData();
            var i = e.target.id.substring(1)
            data[i].title = this.value
            saveData(data)
            load()
        })
    }
}
 
// 删除数据
function remove(e){
    var data = getData();
    if(e.target.nodeName == 'A'){
        var i = e.target.id
        data.splice(i, 1);
        saveData(data)
        load()
    }
}
// 已完成和未完成进行切换
function change(e){
    var data = getData();
    if(e.target.nodeName == 'INPUT'){
        // 获取a的id赋值给 i
        var i = e.target.nextElementSibling.nextElementSibling.id
        // 当点击那个就把他复选框改成选中状态
        data[i].done = e.target.checked
        // 重新存储修改后的数据
        saveData(data)
        // 渲染到页面
        load()
    }
}