一、实现步骤
1)获得indexedDB对象
if (!window.indexedDB) { window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB || window.msIndexDB; //webkit是chrome }
2)打开数据库
var openDBRequest = indexedDB.open("person",3); //第二个参数为版本 var openDBRequest = indexedDB.open("dev");
由于事件执行的顺序问题,打开数据库open方法一定是放在window.onload = function(){} 或都其它事件函数之外
3)创建主键、索引
request.onupgradeneeded = function(event){ //数据库版本发生变化时先调用这个函数,然后再执行onsuccess alert(event.oldVersion); database = request.result; if (database.objectStoreNames.contains(‘user‘)) { database.deleteObjectStore(‘user‘); } var store = database.createObjectStore("user", {keyPath: "uuid", autoIncrement: true}); //此处表示将uuid作为主键 //keyPath 后面的值一定是要存在的属性名,用于标志唯一字段,如果重复则不添加进去,可以是字符串、数值类型等 //此值也是索引中的 Primary key(keyPath : "uuid") store.createIndex("idIndex", "id", {unique: true}); //创建索引 (此处的id改为uuid) //idIndex 为索引的名称,id 为 索引中的KeyPath,即将id属性中的值作为索引 //注:如果写成id的话(与上面的keyPath不一至,将不会创建索引,这里将不会创建索引) var user1 = {uuid :1001, username: "caoxiaobo", password: "123456", age: 23,other:"test"}; var user2 = {uuid :1002, username: "adminuser", password: "123456", age: 24}; var user3 = {uuid :1003, username: "test1user", password: "123456", age: 25} var req = store.put(user1); store.put(user2); store.put(user3); req.onsuccess = function(){ //... } }
索引创建规则(只能有一个unique为true)
例:
4)删除数据库
var deleteRequest = indexedDB.deleteDatabase(‘test‘); deleteRequest.onsuccess = function(){ alert("删除成功"); } db.deleteObjectStore(‘books‘); //删除数据表
二、常用方法及说明
例如:window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB || window.msIndexDB;
返回类型:IDBFactory
接口/属性 | 类型 | 说明 |
IDBFactory.cmp | 方法 | 比较两个键的方法并返回一个结果,表明哪个值更大 |
IDBFactory.deleteDatabase | 方法 | 请求删除数据库 |
IDBFactory.open | 方法 | 请求打开一个数据库的连接,返回类型:IDBOpenDBRequest |
备注:不管创建新数据库还是打开已有的数据库,都是调用 window.indexedDB 对象的 open()
例如:request = indexedDB.open("dev", 3);
返回类型:IDBOpenDBRequest
接口/属性 | 类型 | 说明 |
IDBOpenDBRequest.onblocked | 事件 | |
IDBOpenDBRequest.onupgradeneeded | 事件 | 会在当一个数据库的版本比已经存在的版本还高的时候触发 |
IDBOpenDBRequest.result | 属性 | 返回一个IDBDatabase对象 |
IDBOpenDBRequest.transaction | 属性 | 事务的方法,返回一个IDBTransaction对象 |
备注:
1.如果该数据库不存在,则创建,如果存在,则打开并返回一个IDBOpenDBRequest对象;
2.如果version大于oldVersion,则执行onupgradeneeded,再执行onsuccess,否则直接执行onsuccess
例如:database = openRequest.result;
返回类型:IDBDatabase
接口名称 | 类型 | 说明 |
IDBOpenDBRequest.name | 属性(只读) | DOMString类型,当前连接数据库名 |
IDBOpenDBRequest.objectStoreNames | 属性(只读) | DOMStringList类型,当前连接连接数据库中所有的object store 名字列表。 |
IDBOpenDBRequest.version | 属性(只读) | 64-bit 整型数,当前连接数据库的版本 。当数据第一次被创建时,这个属性是一个空的字符串 |
IDBOpenDBRequest.onabort | 事件 | 在中断数据库访问时触发 |
IDBOpenDBRequest.onclose | 事件 | 在一个单独的线程中关闭数据库连接并立即返回 |
IDBOpenDBRequest.onerror | 事件 | 当访问数据库失败时触发 |
IDBOpenDBRequest.onversionchange | 事件 | 当数据库结构发生更改时触发 |
例如:transaction = database.transaction(stores, mode);
返回类型:IDBTransaction
接口/属性 | 说明 | |
IDBTransaction.db | 属性(只读) | 当前事务所属的数据库连接 |
IDBTransaction.error | 属性 | |
IDBTransaction.mode | 属性(只读) | 使用事务模式,如readonly、readwrite等 |
IDBTransaction.objectStoreNames | 属性 | 返回一个DOMStringList类型, IDBObjectStore |
IDBTransaction.onabort | 事件 | |
IDBTransaction.oncomplate | 事件 | |
IDBTransaction.onerror | 事件 | |
IDBTransaction.onversionchange | 事件 |
事务种类
返回类型:IDBObjectStore
接口/属性 | 类型 | 说明 |
IDBObjectStore.autoIncrement | ||
IDBObjectStore.indexNames | 属性 | 使用事务模式 |
IDBObjectStore.keyPath | 属性 | |
IDBObjectStore.name | 属性 | |
IDBObjectStore.transaction | 方法 | 事件的事件处理器 |
IDBObjectStore.autoIncrement | 属性 | true/false |
例如:request = store.get(id);
返回类型:IDBRequest
接口/属性 | 类型 | 说明 |
IDBRequest.error | 属性(只读) | 当前事务所属的数据库连接 |
IDBRequest.onerror | ||
IDBRequest.onsuccess | 属性(只读) | 使用事务模式 |
IDBRequest.readyState | 返回一个DOMStringList类型, IDBObjectStore | |
IDBRequest.result | 事件 | |
IDBRequest.source | 事件的事件处理器 | |
IDBRequest.transaction | 事件 |
三、CRUD操作
指定游标范围 openKeyCursor() 等同于openCursor() IDBKeyRange.only(value) 只获取指定数据 IDBKeyRange.lowerBound(value, isOpen) 获取最小是value的数据,第二个参数用来指示是否排除value值本身,也就是是否关闭区间 IDBKeyRange.upperBound(value, isOpen) 和上面类似,用于获取最大值是value的数据 如果isOpen为true,即为[value, ~) IDBKeyRange.bound(value1, value2, isOpen1, isOpen2) 查询[value1,value2) 区间内的数据 //第二个参数为游标的方向: IDBCursor.NEXT 顺序循环 IDBCursor.NEXT_NO_DUPLICATE 顺序循环不重复 IDBCursor.PREV 倒序循环 IDBCursor.PREV_NO_DUPLICATE 倒序循环不重复
//查询数据 function getData() { //事务的创建 var tx = database.transaction(["user"], "readonly"); //readwrite readonly var store = tx.objectStore("user"); var request = store.get(1001); request.onsuccess = function() { var user = request.result; //var user = event.target.result; console.log(JSON.stringify(user)); }; } //游标查询所有 function getAllData() { //事务的创建 var tx = database.transaction(["user"], "readonly"); //readwrite readonly var store = tx.objectStore("user"); var openCursor = store.openCursor(); openCursor .onsuccess = function() { var cursor= request.result; //var cursor = event.target.result; if(cursor){ console.log(JSON.stringify(cursor.value)); cursor.continue(); } }; } //游标+索引查询 function getDataByIndexAndCursor() { var tx = database.transaction(["user"], "readonly"); //readwrite readonly var store = tx.objectStore("user"); var index = store.index("nameIndex"); var request = index.openCursor(IDBKeyRange.lowerBound("123")); //var request = index.openCursor(IDBKeyRange.bound("a","v", false, true)); //区分大小写 request.onsuccess = function() { var cursor = request.result; if (cursor) { console.log(JSON.stringify(cursor.value)); cursor.continue(); } } } //获取记录数 function count() { var tx = database.transaction(["user"], "readonly"); var store = tx.objectStore("user"); var request = store.count(); request.onsuccess = function() { var count = request.result; console.log(count); } } //按索引查询 var findByIndex = function() { var mode = IDBTransaction.READ_ONLY; var tx = database.transaction(["user"], "readonly"); var store = tx.objectStore(["user"]); var index = store.index("idIndex"); var request = index.get(1001); console.log(request); request.onsuccess = function() { var data = request.result; console.log(JSON.stringify(data)); } } //添加数据 function addData(){ var tx = database.transaction(["user"],"readwrite"); var store = tx.objectStore("user"); var user4 = {id:1004, username: "caoxiaobo", password: "123456", age: 23,other:"test"}; var user5 = {id:1005, username: "adminuser", password: "123456", age: 24}; var user6 = {id:1006, username: "test1user", password: "123456", age: 25}; store.put(user4); store.put(user5); store.put(user6); } //删除数据 function delData(){ var tx = database.transaction(["user"],"readwrite"); var store = tx.objectStore("user"); store.delete(1004); store.delete(1005); store.delete(1006); } //清空数据 function clearData(){ var tx = database.transaction(["user"],"readwrite"); var store = tx.objectStore("user"); store.clear( ); } //修改数据 function updata(){ var tx = database.transaction(["user"],"readwrite"); var store = tx.objectStore("user"); var request = store.get(1008); request.onsuccess = function(event) { var user = event.target.result; user.username = "cxb1008"; user.age = 28; store.put(user); } }