indexedDB怎么玩

indexedDB怎么玩

IndexedDB 鼓励使用的基本模式如下所示：

1. 打开数据库并且开始一个事务。
2. 创建一个 object store。
3. 构建一个请求来执行一些数据库操作，像增加或提取数据等。
4. 通过监听正确类型的 DOM 事件以等待操作完成。
5. 在操作结果上进行一些操作（可以在 request 对象中找到）

接下来如果想要理解indexedDB具体怎么玩，最好的方法就是创建一个简单的web应用：把人的姓名、电话、地址存储在IndexedDB里。IndexedDB里提供了简单的增、删、改、查接口，界面如下：

1.打开数据库

a)  首先，你需要知道你的浏览器是否支持IndexedDB。

var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
if(!indexedDB)
{
    console.log("你的浏览器不支持IndexedDB");
}

b)  创建请求打开indexedDB：一旦你的浏览器支持IndexedDB，我们就可以打开它。你不能直接打开IndexedDB数据库。IndexedDB需要你创建一个请求来打开它。

var request = indexedDB.open(name, version);

第一个参数是数据库的名称，第二个参数是数据库的版本号。版本号可以在升级数据库时用来调整数据库结构和数据。但你增加数据库版本号时，会触发onupgradeneeded事件，这时可能会出现成功、失败和阻止事件三种情况：

request.onerror = function(e) {
        console.log(e.currentTarget.error.message);
    };

    request.onsuccess = function(e) {
        myDB.db = e.target.result;
        console.log('成功打开DB');
    };

    request.onupgradeneeded = function(e) {
        var db = e.target.result;
        if (!db.objectStoreNames.contains('person')) {
            console.log("我需要创建一个新的存储对象");
            //如果表格不存在，创建一个新的表格（keyPath，主键 ； autoIncrement,是否自增），会返回一个对象（objectStore）
            var objectStore = db.createObjectStore('person', {
                keyPath: "id",
                autoIncrement: true
            });

            //指定可以被索引的字段，unique字段是否唯一

            objectStore.createIndex("name", "name", {
                unique: false
            });

            objectStore.createIndex("phone", "phone", {
                unique: false
            });

        }
        console.log('数据库版本更改为： ' + version);
};

onupgradeneeded事件在第一次打开页面初始化数据库时会被调用，或在当有版本号变化时。所以，你应该在onupgradeneeded函数里创建你的存储数据。如果没有版本号变化，而且页面之前被打开过，你会获得一个onsuccess事件。

2. 添加数据

a)  首先需要创建一个事务，并要求具有读写权限

var transaction = db.transaction(storeName, 'readwrite');

b)  获取objectStore，再调用add方法添加数据

var store = transaction.objectStore(storeName);

    var request = store.get(key);

    request.onsuccess = function(e) {

        data = e.target.result;

        console.log(student.name);

};

3.删除数据

删除跟新增一样，需要创建事务，然后调用删除接口，通过key删除对象。

var transaction = db.transaction(storeName, 'readwrite');

    var store = transaction.objectStore(storeName);

store.delete(key);

4.查找数据

a)  按key查找

开启事务，获取objectStore，调用往get()方法，往方法里传入对象的key值，取出相应的对象

var transaction = db.transaction(storeName, 'readwrite');

    var store = transaction.objectStore(storeName);

    var request = store.get(key);

    request.onsuccess = function(e) {

        data = e.target.result;

        console.log(student.name);

};

b)  使用索引查找

我们可以在创建object store的时候指明索引，使用object store的createIndex创建索引，方法有三个参数：索引名称、索引属性字段名、索引属性值是否唯一。

objectStore.createIndex("name", "name", {
                unique: false

            });

如上代码中，我们建好了name索引，就可以用该索引来进行查询了：

var transaction = db.transaction(storeName);

    var store = transaction.objectStore(storeName);

    var index = store.index(search_index);

    index.get(value).onsuccess = function(e) {

        data = e.target.result;

        console.log(student.id);

}

c)  游标遍历数据

对数据库熟悉的同学很好理解游标的作用，有了数据库object store的游标，我们就可以利用游标遍历object store了。

var transaction = db.transaction(storeName);

    var store = transaction.objectStore(storeName);

    var request = store.openCursor();//打开游标

    var dataList = new Array();

    var i = 0;

    request.onsuccess = function(e) {

        var cursor = e.target.result;

        if (cursor) {

            console.log(cursor.key);

            dataList[i] = cursor.value;

            console.log(dataList[i].name);

            i++;

            cursor.continue();

        }

        data = dataList;

};

4.更新对象

更新对象，首先要把它取出来，修改，然后再放回去。

var transaction = db.transaction(storeName, 'readwrite');

    var store = transaction.objectStore(storeName);

    var request = store.get(key);

    request.onsuccess = function(e) {

        var data = e.target.result;

        for (a in newData) {

            //除了keypath之外

 

            data.a = newData.a;

        }

        store.put(data);

};

5.关闭与删除数据库

关闭数据库可以直接调用数据库对象的close方法

function closeDB(db) {

    db.close();

}

删除数据库使用数据库对象的deleteDatabase方法

function deleteDB(name) {

    indexedDB.deleteDatabase(name);

}

很赞哦！ (0)