项目初始化
我们采用Vite+React来进行简单的Todo List程序开发。
npm create vite@latest react-todo-list -- --template react-ts
cd react-todo-list
npm i
npm run dev
需求分析
我们的Todo List小程序需要待办事项的增删改查。待办事项包括标题，完成状态两个属性。
有关IDB
IDB是浏览器原生的用于存储大量kv数据的API。它是一种NoSQL系统，不使用SQL进行查询。IDB使用面向对象的查询方式对数据进行查询（不是所有的NoSQL都使用此种方式）。相较于Web Storage API（即我们熟知的localStorage），IDB支持对复杂对象的存取——甚至是blob这种二进制对象。
理解IDB，首先要理解objectStore,transaction和cursor三个对象。objectStore类似SQL数据库中的表，transaction（事务）代表对数据库发起的一次或多次请求，而cursor则是在数据表上移动的游标。基于这三个对象，我们便可以完成对数据的增删改查操作。
在实践中，创建objectStore并指定其keyPath（类似SQL的主键）之后还需要在该表下创建数个索引（类似SQL的键）并各自指定keyPath。创建完成后便可使用该表。对表的请求分三种：只读、读写与“版本变更”。前两种请求很好理解，最后一种代表“需要对表的结构进行更改”，这种请求可以对表的键进行添加和删除。
下篇开始实践！
