前面说过html5对于离线应用的支持是很好的，不禁支持localstorage这样在客户端存储一个键值对的方式而且还可以引用manifest文件，将需要缓存的文件在其中定义，其实html5中还可以使用indexdb，又称索引数据库，该数据库可以用来存储离线对象。下面开始：
请求完成后的回调
所有的请求完成之后都会有一个回调，onsuccess 和onerror，其中：onsuccess表示请求成功时候的回调，onerror 表示请求失败时候的回调。同时还可以使用javascript中的 try/catch来捕获异常，在进一步的处理。
使用数据库
一个数据库一次只能有一个版本，初次创建改数据库的时候版本号是0，当我们需要更改已经创建好的数据库时候，就需要更改其版本号，当更改 版本号的时候，会触发upgradeneeded回调，所以修改数据库或者存储对象的方法必须放到upgradeneeded方法中执行。
判断当前浏览器是否支持indexdb
if (!window.indexedDB) {
window.alert("您的浏览器不支持indexdb");
}<!--这里indexDB是window对象的属性，类似于alert所以window可以省略-->创建数据库
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function createDatabase(indexDbName) {
//调用 open 方法并传递数据库名称。如果不存在具有指定名称的数据库，则会创建该数据库
var openRequest = indexedDB.open(indexDbName); var db;
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result;//创建数据库成功时候，将结果给db，此时db就是当前数据库
//alert("this is :"+db);
};
openRequest.onupgradeneeded = function (evt) {//更改数据库，或者存储对象时候在这里处理
};
} </script></head><body>
<a href="javascript:createDatabase('firstdb')">createDatabase</a></body></html>上面这段代码可以创建一个数据库到客户端。 
删除数据库
通过调用 deleteDatabase 方法，并且传入需要删除的数据库名称来删除现有数据库。
function deleteDatabase(indexDbName) {
var deleteDbRequest = indexedDB.deleteDatabase(indexDbName);
deleteDbRequest.onsuccess = function (event) {
console.log("detete database success");
};
deleteDbRequest.onerror = function (e) {
console.log("Database error: " + e.target.errorCode);
};
}存储数据
objectstore
在indexdb中没有表的概念，而是使用objectstore来存储对象的，一个数据库中可以包含多个objectStore，objectStore是一个灵活的数据结构，可以存放多种类型数据。我们可以使用每条记录中的某个指定字段作为键值（keyPath），也可以使用自动生成的递增数字作为键值（keyGenerator），也可以不指定。选择键的类型不同，objectStore可以存储的数据结构也有差异
事物
在更新数据库内容或者插入新的数据时候，需要首先开启到事物，并且需要制定当前事物操作了那些objectstore。
事务具有三种模式
只读：read，不能修改数据库数据，可以并发执行
读写：readwrite，可以进行读写操作
版本变更：verionchange
因为对新数据的操作都需要在transaction中进行，而transaction又要求指定object store，所以我们只能在创建数据库的时候初始化object store以供后面使用。
指定keyid添加数据
指定keyid，可以理解为指定一个主键
//添加数据
function insertAnObj(indexDbName) {
var userinfos=[{
id:1001,
name:"小李",
age:24
},{
id:1002,
name:"老王",
age:30
},{
id:1003,
name:"王麻子",
age:26
}];
var openRequest = indexedDB.open(indexDbName,1);
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
//alert("this is :"+db);
//打开和userinfo相关的objectstore的事物
var transaction = db.transaction("userinfo",'readwrite');
var store=transaction.objectStore("userinfo");
for(var i=0;i<userinfos.length;i++){
//alert("add"+userinfos[i]);
store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
}
};
openRequest.onupgradeneeded = function(event) {
var db = event.target.result;
//在第一次创建数据库的时候，就创建userinfo相关的objectstore，以供后面添加数据时候使用
if(!db.objectStoreNames.contains('userinfo')){
//keyPath:Javascript对象，对象必须有一属性作为键值
db.createObjectStore('userinfo',{keyPath:"id"});
}
}
}
使用autoIncrement添加数据
指定autoIncrement，可以理解为指定了一个主键自动增长。
//指定主键自动增长
function insertAutoInc(indexDbName) {
var userinfos=[{
id:1001,
name:"小李",
age:24
},{
id:1002,
name:"老王",
age:30
},{
id:1003,
name:"王麻子",
age:26
}];
var openRequest = indexedDB.open(indexDbName,2);
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
//alert("this is :"+db);
//打开和userinfo相关的objectstore的事物
var transaction = db.transaction("userinfo",'readwrite');
var store=transaction.objectStore("userinfo");
for(var i=0;i<userinfos.length;i++){
//alert("add"+userinfos[i]);
store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
}
};
openRequest.onupgradeneeded = function(event) {
var db = event.target.result;
//在第一次创建数据库的时候，就创建userinfo相关的objectstore，以供后面添加数据时候使用
if(!db.objectStoreNames.contains('userinfo')){
//keyPath:Javascript对象，对象必须有一属性作为键值
db.createObjectStore('userinfo',{autoIncrement: true});
}
}
}
查找数据
根据id查找数据
之前我们已经添加过了定义key为autoincreament类型方式的数据，现在就可以根据id来查找单条数据了。
function findDbdata(indexDbName,value) {
var openRequest = indexedDB.open(indexDbName);
var db;
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
var transaction = db.transaction("userinfo",'readwrite');
var objectStore = transaction.objectStore("userinfo");
//var cursor = objectStore.openCursor();
var request = objectStore.get(Number(1));//查找i=1的对象，这里使用Number将1转换成数值类型
request.onsuccess = function(e) {
var res = e.target.result; //查找成功时候返回的结果对象
console.dir(res);
if (res) {
for (var field in res) { //遍历每一个对象属性
console.log(field+":"+res[field]);
// alert(res[field]);
};
};
}
};
openRequest.onupgradeneeded = function (event) {//更改数据库，或者存储对象时候在这里处理
};
}
查找所有数据
function findAllDbdata(indexDbName) {
var openRequest = indexedDB.open(indexDbName);
var db;
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
var transaction = db.transaction("userinfo",'readonly');
var objectStore = transaction.objectStore("userinfo");
var cursor = objectStore.openCursor();
cursor.onsuccess = function(e) {
var res = e.target.result;
if(res) {
console.log("Key", res.key);
var request = objectStore.get(Number(res.key));//根据查找出来的id，再次逐个查找
request.onsuccess = function(e) {
var res = e.target.result; //查找成功时候返回的结果对象
//console.dir(res);
if (res) {
for (var field in res) { //遍历每一个对象属性
console.log(field+":"+res[field]);
// alert(res[field]);
};
};
}
res.continue();
}
}
};
}
根据id删除数据
删除跟新增一样，需要创建事务，然后调用删除接口delete来删除数据
function deleteDataById(indexDbName) {
var openRequest = indexedDB.open(indexDbName);
var db;
openRequest.onsuccess = function(event) {
db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
var transaction = db.transaction("userinfo",'readwrite');
var objectStore = transaction.objectStore("userinfo");
var request = objectStore.delete(Number(2));//根据查找出来的id，再次逐个查找
request.onsuccess = function(e) {
console.log("delete success");
}
}
}删除所有数据
通过objectstore.clear()删除所有的数据。
function deleteAllData(indexDbName) {
var openRequest = indexedDB.open(indexDbName);
var db;
openRequest.onsuccess = function(event) {
db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
var transaction = db.transaction("userinfo",'readwrite');
var objectStore = transaction.objectStore("userinfo");
objectStore.clear();
}
}创建索引
我们可以在创建object store的时候指明索引，使用object store的createIndex创建索引，方法有三个参数
索引名称
索引属性字段名
索引属性值是否唯一
这里我新创建一个数据库，并且设置基于name和age的索引：
//指定主键自动增长
function insertAutoInc(indexDbName) {
var userinfos=[{
id:1001,
name:"小李",
age:24
},{
id:1002,
name:"老王",
age:30
},{
id:1003,
name:"王麻子",
age:26
}];
var openRequest = indexedDB.open(indexDbName,2);
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
//alert("this is :"+db);
//打开和userinfo相关的objectstore的事物
var transaction = db.transaction("userinfo",'readwrite');
var store=transaction.objectStore("userinfo");
for(var i=0;i<userinfos.length;i++){
//alert("add"+userinfos[i]);
store.add(userinfos[i]);//将对象添加至userinfo相关的objectstore中
}
};
openRequest.onupgradeneeded = function(event) {
var db = event.target.result;
//在第一次创建数据库的时候，就创建userinfo相关的objectstore，以供后面添加数据时候使用
if(!db.objectStoreNames.contains('userinfo')){
//keyPath:Javascript对象，对象必须有一属性作为键值
var objectStore = db.createObjectStore('userinfo',{autoIncrement: true});
objectStore.createIndex('nameIndex','name',{unique:true});//这里假定名字不能重复，创建基于name的唯一索引
objectStore.createIndex('ageIndex','age',{unique:false});//创建基于age的索引
}
}
}
利用索引查询数据
可以利用索引快速获取数据，name的索引是唯一的没问题，但是对于age索引只会取到第一个匹配值，要想得到所有age符合条件的值就需要使用游标了
function getDataByIndex(indexDbName) {
var openRequest = indexedDB.open(indexDbName); var db;
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
var transaction = db.transaction("userinfo",'readwrite');
var objectStore = transaction.objectStore("userinfo");
var nameIndex = objectStore.index("nameIndex"); //获得nameIndex索引
nameIndex.get("小李").onsuccess = function(e) { //根据name索引获得数据成功的回调
var userinfo = e.target.result;
console.log("id:"+userinfo.id+"==name:"+userinfo.name+"==age:"+userinfo.age);
}
}
}
游标和索引结合使用
刚才我们不仅创建了一个name的唯一索引，而且还创建了一个age的索引，如果我们根据age来获取数据，有可能会有多条，由于age不唯一，所以这个时候就需要使用游标来遍历数据。这里我先插入两条age=24的记录。 
function getDataByAgeIndex(indexDbName) {
var openRequest = indexedDB.open(indexDbName); var db;
openRequest.onerror = function(e) {//当创建数据库失败时候的回调
console.log("Database error: " + e.target.errorCode);
};
openRequest.onsuccess = function(event) {
console.log("Database created");
db = openRequest.result; //创建数据库成功时候，将结果给db，此时db就是当前数据库
var transaction = db.transaction("userinfo",'readwrite');
var objectStore = transaction.objectStore("userinfo");
var nameIndex = objectStore.index("ageIndex"); //获得ageIndex索引
var request = nameIndex.openCursor();//openCursor没有参数的时候，表示获得所有数据
request.onsuccess = function(e) {//openCursor成功的时候回调该方法
var cursor = e.target.result; if (cursor) {//循环遍历cursor
var userinfo = cursor.value; //alert(userinfo.name);
console.log("id:"+userinfo.id+"==name:"+userinfo.name+"==age:"+userinfo.age);
cursor.continue();
};
}
}
}
同时可以在opencursor的时候传入key range，来限制范围。
IDBKeyRange.only(value):只获取指定数据
IDBKeyRange.lowerBound(value,isOpen)：获取最小是value的数据，第二个参数用来指示是否排除value值本身，也就是数学中的是否是开区间
IDBKeyRange.upperBound(value,isOpen)：和上面类似，用于获取最大值是value的数据
IDBKeyRange.bound(value1,value2,isOpen1,isOpen2)：表示在value1和value2之间，是否包含value1和value2
这里为了演示方便，我先删除之前的数据库，重新插入更多的数据，现在所有数据如下： 
IDBKeyRange.only(value)
这里只需要在上面opencursor的时候将该限制条件传入即可，其他代码将保持不变，如下：
var request = nameIndex.openCursor(IDBKeyRange.only(Number(24)));
这里只根据age索引查询age==24的所有数据。 
IDBKeyRange.lowerBound(value,isOpen)
在使用IDBKeyRange.lowerBound(28，true)来获取年龄大于28的并且包含28岁的所有数据。
var request = nameIndex.openCursor(IDBKeyRange.lowerBound(Number(28),true));
ok，今天就到这里了，希望大家喜欢。
以上是html5使用indexdb的代码实例分享（图文）的详细内容。更多信息请关注PHP中文网其他相关文章！
理解H5：含义和意义May 11, 2025 am 12:19 AMH5是HTML5，是HTML的第五个版本。HTML5提升了网页的表现力和交互性，引入了语义化标签、多媒体支持、离线存储和Canvas绘图等新特性，推动了Web技术的发展。
H5：可访问性和网络标准合规性May 10, 2025 am 12:21 AM无障碍访问和网络标准遵循对网站至关重要。1）无障碍访问确保所有用户都能平等访问网站，2）网络标准遵循提高网站的可访问性和一致性，3）实现无障碍访问需使用语义化HTML、键盘导航、颜色对比度和替代文本，4）遵循这些原则不仅是道德和法律要求，还能扩大用户群体。
HTML中的H5标签是什么？May 09, 2025 am 12:11 AMHTML中的H5标签是第五级标题，用于标记较小的标题或子标题。1)H5标签帮助细化内容层次，提升可读性和SEO。2)结合CSS可定制样式，增强视觉效果。3)合理使用H5标签，避免滥用，确保内容结构逻辑性。
H5代码：Web结构的初学者指南May 08, 2025 am 12:15 AMHTML5构建网站的方法包括：1.使用语义化标签定义网页结构，如、、等；2.嵌入多媒体内容，使用和标签；3.应用表单验证和本地存储等高级功能。通过这些步骤，你可以创建一个结构清晰、功能丰富的现代网页。
H5代码结构：组织内容以实现可读性May 07, 2025 am 12:06 AM通过合理的H5代码结构可以让页面在众多内容中脱颖而出。1)使用语义化标签如、、等组织内容，使结构清晰。2)通过CSS布局如Flexbox或Grid控制页面在不同设备上的呈现效果。3)实现响应式设计，确保页面在不同屏幕尺寸上自适应。
H5与较旧的HTML版本：比较May 06, 2025 am 12:09 AMHTML5（H5）与旧版本HTML的主要区别包括：1）H5引入了语义化标签，2）支持多媒体内容，3）提供离线存储功能。H5通过新标签和API增强了网页的功能和表现力，如和标签，提高了用户体验和SEO效果，但需注意兼容性问题。
H5与HTML5：澄清术语和关系May 05, 2025 am 12:02 AMH5和HTML5的区别在于：1）HTML5是网页标准，定义结构和内容；2）H5是基于HTML5的移动网页应用，适用于快速开发和营销。
HTML5特征：H5的核心May 04, 2025 am 12:05 AMHTML5的核心特性包括语义化标签、多媒体支持、表单增强和离线存储与本地存储。1.语义化标签如、等提高了代码可读性和SEO效果。2.多媒体支持通过和标签简化了嵌入媒体内容的过程。3.表单增强引入了新的输入类型和验证属性，简化了表单开发。4.离线存储和本地存储通过ApplicationCache和localStorage等提高了网页性能和用户体验。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器
WebStorm Mac版
好用的JavaScript开发工具
mPDF
mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），
适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。
记事本++7.3.1
好用且免费的代码编辑器
