第11章 HTML5的IndexedDB数据库(HTML5与CSS3 Web前端开发技术).ppt

HTML5+CSS3 Web前端开发技术 LOGO HTML5+CSS3 Web前端开发技术 第11章 HTML5的IndexedDB数据库 IndexedDB 数据库概述 1 创建数据库 2 数据库的版本更新和事务处理 3 创建对象仓库 4 创建索引 5 保存和删除数据 6 使用游标检索批量数据 7 11.1 IndexedDB 数据库概述 NoSQL数据库 NoSQL数据库是新一代数据库，其含义是Not Only SQL 或non-relational，具有非关系型、高效的特点。与关系型数据库比较，NoSQL数据库适用于数据模型比较简单、高并发读写、海量数据的高效存储和访问等需求。 2. IndexedDB 数据库 （1）IndexedDB 数据库和对象仓库 一个网站可能有一个或多个IndexedDB 数据库，每个数据库必须具有惟一的名称；一个数据库可包含一个或多个对象仓库。 11.1 IndexedDB 数据库概述 （2）版本更新和事务处理 IndexedDB 数据库中创建或删除对象仓库、创建或删除索引的操作，可以看作是数据库的结构发生变化，必须使用新的版本号来更新数据库的版本，以避免重复修改数据库结构。 （3）索引和游标 IndexedDB数据库中，只能对被索引的属性值进行检索。对象仓库可有一个或多个索引。 IndexedDB 中的游标能够迭代一个对象仓库中的所有记录。IndexedDB 中的游标是双向的，所以可以向前和向后迭代记录，还可以跳过非惟一索引中的重复记录。 11.1 IndexedDB 数据库概述 3. IndexedDB的异步API IndexedDB规范中包含异步 API 和同步 API。同步API 用于Web浏览器中。IndexedDB大部分操作的结果返回模式，使用异步API请求—响应的模式，所有异步请求都有一个onsuccess回调函数和一个onerror回调函数，前者在数据库操作成功时调用，后者在一个操作未成功时调用。 11.2 创建数据库 创建和连接数据库 IndexedDB API中的window.indexedDB的open()方法，用于创建或打开指定的数据库，语法格式如下。 var dbRequest = indexedDB.open(dbName,dbVersion); 11.2 创建数据库 2. IndexedDB 数据库中的对象定义 IndexedDB 数据库包括indexedDB、IDBTransaction 、IDBKeyRange、IDBCursor等对象，为了确保脚本代码在各浏览器中兼容，应当在使用数据库之前统一定义，代码如下。 window.indexedDB=window.indexedDB||window.webkitIndexedDB; window.IDBTransaction=window.IDBTransaction||window.webkitIDBTransaction|; window.IDBKeyRange= window.IDBKeyRange||window.webkitIDBKeyRange; window.IDBCursor= window.IDBCursor||window.webkitIDBCursor; 11.2 创建数据库 3. 删除数据库 删除现有数据库，可以调用 deleteDatabase()方法，该方法的使用和open()方法类似，将要删除的数据库名称作为参数，代码如下。 function deleteDatabase() { var deleteDbRequest = window.indexedDB.deleteDatabase(dbName); deleteDbRequest.onsuccess = function (e) { //成功处理 }; deleteDbRequest.onerror = function (e) { //错误处理 }; } 11.2 创建数据库 4. 连接数据库的完整示例 11.3 数据库的版本更新和事务处理 1. 版本更新 连接成功的数据库还不能执行任何数据操作。在使用IndexedDB 数据库的时候，所有数据的操作都需要在一个事务内部执行。而对于对象仓库与索引的操作，类似于关系数据库中表结构或索引的操作，必须在版本更新事务内部进行。 示例11-2实现的是一个版本更新的测试功能。 11.3 数据库的版本更新和事务处理 2.事务处理 创建对象仓库与索引、对象仓库执行所有读取和写入操作的操作必须在事务中进行。