上回说到IDB的理论基础，这次上点干货。让我们基于MVC模型分解这个实例
Model模型
模型上我们需要三个State：需要渲染的todos和用于新建todo的title和state两个表单属性。todos由title和state两个属性组成。
View视图
视图上我们以ul元素渲染todos，为每个li元素配置click以更改todo的state，在li尾部添加button以删除todo，再为了美观添加一些装饰元素
Controller控制器
控制上我们需要对数据的增加，删除，改动，查询，以及表单的改动。增改删都是直接调用对应方法即可。
游标使用
使用query对IDB的查询需要先经过openCursor请求。该请求的success事件发生时即可使用该请求的result属性。result中提供cursor游标，cursor.value属性对应数据库的一行。取出所需数据后调用cursor.continue方法将会使游标移动并重复触发success事件。案例如下：
let todos: any = []
cursorRequest.onsuccess = (() => {
let cursor = cursorRequest.result;
if (!cursor) {
setTodos(todos);
return;
}
todos.push(cursor.value)
cursor.continue();
})
}
可以看到案例中并没有使用循环，而是在游标轮空后return出success回调，轮空前使用continue推入下一轮循环。
query使用
IDB除了提供游标之外，还提供了使用query进行查询。IndexedDB API**IDBKeyRange**的接口表示用于键的某些数据类型的连续间隔。可以使用键或一系列键从对象中检索记录。您可以使用下限和上限来限制范围。例如，您可以迭代值范围 A–Z 中某个键的所有值。IDBObjectStoreIDBIndex
键范围可以是单个值，也可以是具有上限、下限或端点的范围。如果键范围同时具有上限和下限，则它是有界的；如果它没有界限，那么它就是无界的。有界键范围可以是开放的（排除端点）或封闭的（包括端点）。
