原生JS+H5 indexDB实现Todolist

开发环境：win10，vscode，chrome浏览器

这是我前几天花了2个小时来小时写的一个小东西，也算是完成了我在菜鸡的时候一直想做而没有做成的事情吧，而且之前的代码写的我现在真的不忍直视了😂

source-code

由于目前业务比较简单，就先都放在一起了，copy份是初始份，index是去掉某些部分的最终版，但是没有第一版是不可以的，可以看看源码了解思路，欢迎探讨☺

先来放一张图

我的需求

以下需求都是在初步实现时给自己定的，不过后续有需求的话也可以再改嘛

1、界面简洁--总之就是性冷淡风的感觉

2、大致需要什么数据，数据设计

status:0表示未完成 1表示完成，样式上的区别就是-删除线

var todoData = [
    {
       id: 1,
        todoName: "Get up",
        status: 0
      },
      {
        id: 2,
        todoName: "Stand up",
        status: 0
      },
      {
        id: 3,
        todoName: "Don't give up",
        status: 0
      },
      {
        id: 4,
        todoName: "Do something else",
        status: 0
      }
    ];

3、将设计好的数据存到indexDB数据库中

4、再从数据库中拿出数据进行页面渲染

5、添加dom事件，处理增加，删除（实现假删除，只改变status的状态）

6、根据status的值优先将未完成的渲染到前面，已完成的渲染到后面--两次遍历搞定

主要就是熟悉了以下indexDB的使用，进行增删查改；虽然总结起来可能没啥，但在实际做的过程中还是可以收获很多边边角角的小知识，感觉不错。