如何使用indexdb

 

 

一、实现步骤

 

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)创建主键、索引

如何使用indexdb
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(){
          //...
    }
}
如何使用indexdb

 

索引创建规则(只能有一个unique为true)

例:

var store = database.createObjectStore(["user"], {keyPath: "uuid", autoIncrement: true});
store.createIndex("idIndex", "uuid", {unique: true});
store.createIndex(‘nameIndex‘,‘username‘,{unique: false});
store.createIndex(‘passwordIndex‘,‘password‘,{unique: false});

 

 

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  事件   

 

 

 

 

 

 

 

 

事务种类

IDBTransaction.READ_ONLY       readonly     默认
IDBTransaction.READ_WRITE     readwrite
IDBTransaction.VERSION_CHANGE     版本升级
 
 
 
例如:store = transaction.ojbectStore(stores);

返回类型: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        倒序循环不重复

 

 

如何使用indexdb
//查询数据
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);
    }
}
如何使用indexdb

如何使用indexdb

上一篇:idea mysqldump


下一篇:前端存储之indexDB