HTML5中indexedDB数据库的使用示例

　　介绍

这篇文章主要为大家展示了HTML5中indexedDB数据库的使用示例,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带大家一起来研究并学习一下“HTML5中indexedDB数据库的使用示例”这篇文章吧。

html有什么特点

1,简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,适合初学前端开发者使用。 　　2、可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证只 　　 　　 　　3、平台无关性:超级文本标记语言能够在广泛的平台上使用,这也是万维网盛行的一个原因。 　　 　　 　　4、通用性:HTML是网络的通用语言,它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器。

<强>前言

在HTML5的本地存储中,有一种叫indexedDB的数据库,该数据库是一种存储在客户端本地的NoSQL数据库,它可以存储大量的数据。从上篇:HTML5进阶系列:网络存储,我们知道网络存储可以方便灵活的在本地存取简单数据,但是对于大量结构化存储,indexedDB的优势就更加明显。接下来我们来看看indexedDB如何存储数据。

<强>连接数据库

一个网站可以有多个indexedDB数据库,但每个数据库的名称是唯一的。我们需要通过数据库名来连接某个具体的数据库。

var  request =, indexedDB.open (& # 39; dbname # 39;,, 1),,,//,打开,dbName 数据库 　　时间=request.onerror 函数(e){,,,,,,,,,,,,,//,监听连接数据库失败时执行 　　,,,console.log(& # 39;连接数据库失败& # 39;); 　　} 　　时间=request.onsuccess 函数(e){,,,,,,,,,,,//,监听连接数据库成功时执行 　　,,,console.log(& # 39;连接数据库成功& # 39;); 　　}

我们使用indexedDB。开放的方法来连接数据库,该方法接收两个参数,第一个是数据库名,第二个是数据库版本号。该方法会返回一个IDBOpenDBRequest对象,代表一个请求连接数据库的请求对象。我们可以通过监听请求对象的> var  request =, indexedDB.open (& # 39; dbname # 39;,, 2),,,//,更新版本,打开版本为2的数据库//,… 　　时间=request.onupgradeneeded 函数(e) { 　　,,,console.log(& # 39;新数据库版本号为=& # 39;,+,e.newVersion); 　　}

我们通过监听请求对象的> var  request =, indexedDB.open (& # 39; dbname # 39;,, 2);//,… 　　时间=request.onsuccess 函数(e) { 　　,,,console.log(& # 39;连接数据库成功& # 39;); 　　,,,var  db =, e.target.result; 　　,,,db.close (); 　　,,,console.log(& # 39;数据库已关闭& # 39;); 　　}

<>强删除数据库

indexedDB.deleteDatabase (& # 39; dbname # 39;); 　　console.log(& # 39;数据库已删除& # 39;);

<强>创建对象仓库

对象存储(对象仓库)是indexedDB数据库的基础,在indexedDB中并没有数据库表,而对象仓库,就是相当于一个数据库表。

var  request =, indexedDB.open (& # 39; dbname # 39;,, 3);//,… 　　时间=request.onupgradeneeded 函数(e) { 　　,,,var  db =, e.target.result; 　　,,,var  store =, db.createObjectStore(& # 39;用户# 39;,,{keyPath: & # 39; userid # 39;,,自动增量:,假}); 　　,,,console.log(& # 39;创建对象仓库成功& # 39;); 　　}

db。createObjectStore方法接收两个参数,第一个为对象仓库名,第二个参数为可选参数,值为一个js对象。该对象中的keyPath属性为主键,相当于数据库表中标识为主键.autoIncrement属性为假,则表示主键值不自增、添加数据时需指定主键值。

注意:在数据库中,对象仓库名不可重复,否则浏览器会报错。

<强>创建索引

indexedDB数据库中通过数据对象的某个属性来创建索引,在数据库中进行检索时,只能通过被设为索引的属性进行检索。

var  request =, indexedDB.open (& # 39; dbname # 39;,, 4);//,… 　　时间=request.onupgradeneeded 函数(e) { 　　,,,var  db =, e.target.result; 　　,,,var  store =, db.createObjectStore (& # 39; newUsers& # 39;,, {keyPath: & # 39; userid # 39;,,自动增量:,假}); 　　,,,var  idx =, store.createIndex (& # 39; usernameIndex& # 39; & # 39;用户名# 39;,{独特:假}) 　　,,,console.log(& # 39;创建索引成功& # 39;); 　　}

商店。方法createIndex方法接收三个参数,第一个为索引名,第二个为数据对象的属性,上例中使用的用户名属性来创建索引,第三个参数为可选参数,值为一个js对象。该对象中独特的属性为真的,代表索引值不可以相同,即两条数据的用户名不可以相同,为假则可以相同。

HTML5中indexedDB数据库的使用示例