【图文】Web前端之客户端存储——indexedDB数据库常见使用方法，超详细！看这一篇就够了

写在前面

该篇文章是博主在学习《JavaScript高级程序设计（第三版）》时归纳整理的，这篇文章里面用到的示例源代码均在我的github项目中，感兴趣的朋友可以点击这里下载源码来看，源码里面包括几乎所有随书所做的小demo，而且写了很多注释，相信是很容易看懂的。项目仍在更新中。

indexedDB数据库简介

indexedDB是浏览器中保存结构化数据的一种数据库，可以方便的读取和保存JavaScript对象。同时还支持查询和搜索功能。
该数据库最大的特点在于，所有的操作都是异步进行的，这意味着几乎每一步操作都有一个相应的事件处理程序，如onerror，onsuccess等。

1.创建/打开数据库

使用indexed的第一步是打开它，由于不同的浏览器实现差异，indexDB对象的获取可能会有不同

// 解决浏览器之间的差异
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB

// 调用open方法打开数据库，若数据库不存在则创建数据库
// 第一个参数是要打开或创建的数据库的名称，第二个参数是数据库的版本号
var request = indexedDB.open("administer"， 1)  

open方法会返回一个IDBRequest对象，用来处理该过程。可以为该对象设置事件处理函数，相关的操作完成后，IDBRequest对象的对应的属性会自动填充，从而触发所设置的事件。
通常我们需要设置以下三个事件处理函数：success，error，upgradeneeded

//操作成功的回调函数
request.onsuccess = function(event){
	// event.target就是request对象，可以用event.target.result获得创建的数据库
	console.log("indexedDB数据库打开/创建成功！")
}

//操作失败的回调函数
request.onerror = function(event){
	console.error("数据库创建/打开失败")
}

//数据库版本更新时的回调函数
request.onupgradeneeded = function(event){
	// 获取数据库
	var db = event.target.result
	// 在数据库版本更新时创建表（对象存储空间）
	db.createObjectStore("users", {keyPath: "id",autoIncrement: true})
}

需要注意的是，若数据库不存在，则创建数据库时会触发版本更新事件。因为创建数据库从无到有，设置了版本号，所以会触发。
另外，数据库中对象存储空间的创建只能在onupgradeneeded事件处理程序中设置。

indexedDB是非关系型数据库，存储的是对象。而关系型数据库存储的是表格，是一种关系。为了便于理解，大家可以将对象存储空间类比为关系数据库中的表格，而把其中存储的对象类比为表中的记录

可以在控制台的application下看到，administrator数据库创建成功：