本地数据存储之 IndexedDB 实践

时间 2019-11-08

标签本地数据存储 indexeddb 实践繁體版

原文原文链接

本地存储的类型

本地存储主要有如下几种：数据库

Web Sql
IndexedDB
Local Storage
Session Storage
Cookies
Application Cache

项目需求

离线存储读取数据
容许用户对数据进行增删改操做
数据存储在本地，不依赖后端
数据支持索引查询

因为 WebSQL 在标准上还存在争议，而 localStorage 实现数据分页、查询比较复杂，最终考虑使用了 IndexedDB 来知足需求。后端

IndexedDB 支持状况

IndexedDB　数据库的使用

定义数据库对象

var wxbDB = {
    name   : "wxb",
    version: 1,
    db     : null
};

此处咱们定义了一个数据库对象，包括name 数据库名称，version 数据库的版本，以及 db 数据对象。数据结构

数据库初始化

function initDB(dbObj) {
    dbObj.version = dbObj.version || 1;
    var request = indexedDB.open(dbObj.name, dbObj.version);
    request.onerror = function (e) {
        console.log(e.currentTarget.error.message);
    };
    request.onsuccess = function (e) {
        dbObj.db = e.target.result;
    };
    request.onupgradeneeded = function (e) {
        var thisDB = e.target.result;
        if (!thisDB.objectStoreNames.contains("material")) {
            var objStore = thisDB.createObjectStore("material", {keyPath: "id", autoIncrement: true});
            objStore.createIndex("wxid", "wxid", {unique: true});
        }
        if (!thisDB.objectStoreNames.contains("account")) {
            var objStore = thisDB.createObjectStore("account", {keyPath: "id", autoIncrement: true});
            objStore.createIndex("wxid", "wxid", {unique: true});
            objStore.createIndex("nickName", "nickName", {unique: false});
        }
    };
}

indexedDB.open 方法能够建立或者打开一个 IndexedDB，并返回 IDBOpenDBRequest 对象。并发

IDBOpenDBRequest 对象除了onerror 和 onsuccess，还有一个相似回调函数句柄 onupgradeneeded。这个句柄在咱们请求打开的数据库的版本号和已经存在的数据库版本号不一致的时候调用。函数

indexedDB.open 方法的第二个可选参数是数据库版本号，数据库建立的时候默认版本号为 1，当咱们传入的版本号和数据库当前版本号不一致时 onupgradeneeded 就会被调用，固然咱们不能试图打开比当前数据库版本低的version，不然调用的就是 onerror 了。this

onupgradeneeded 被调用时，咱们能够作一些建表、索引等操做。spa

有了数据库后咱们天然但愿建立一个表用来存储数据，但 indexedDB 中没有表的概念，而是 objectStore，一个数据库中能够包含多个 objectStore，objectStore 是一个灵活的数据结构，能够存放多种类型数据。code

咱们可使用每条记录中的某个指定字段做为键值（keyPath），也可使用自动生成的递增数字做为键值（keyGenerator），也能够不指定。选择键的类型不一样，objectStore 能够存储的数据结构也有差别。对象

不使用：任意值，可是没添加一条数据的时候须要指定键参数
keyPath : Javascript 对象，对象必须有一属性做为键值
keyGenerator : 任意值
都使用 : Javascript 对象，若是对象中有 keyPath 指定的属性则不生成新的键值，若是没有自动生成递增键值，填充 keyPath 指定属性

关闭数据库

function closeDB(dbObj) {
    dbObj.db.close();
}

删除数据库

function deleteDB(dbObj) {
    indexedDB.deleteDatabase(dbObj.name);
}

数据库表的 CURD

在对新数据库作任何事情以前，须要开始一个事务。事务中须要指定该事务跨越哪些 object store。blog

事务具备三种模式

只读：read，不能修改数据库数据，能够并发执行
读写：readwrite，能够进行读写操做
版本变动：verionchange

添加数据

function addData(dbObj, tableName, data, cb) {
    var transaction = dbObj.db.transaction(tableName, 'readwrite');
    transaction.oncomplete = function () {
        console.log("transaction complete");
    };
    transaction.onerror = function (event) {
        console.dir(event)
    };

    var objectStore = transaction.objectStore(tableName);
    var request = objectStore.add(data);
    request.onsuccess = function (e) {
        if (cb) {
            cb({
                error: 0,
                data : data
            })
        }
    };
    request.onerror = function (e) {
        if (cb) {
            cb({
                error: 1
            })
        }
    }
}

删除数据

function deleteData(dbObj, tableName, id, cb) {
    var transaction = dbObj.db.transaction(tableName, 'readwrite');
    transaction.oncomplete = function () {
        console.log("transaction complete");
    };
    transaction.onerror = function (event) {
        console.dir(event)
    };
    var objectStore = transaction.objectStore(tableName);
    var request = objectStore.delete(parseInt(id));
    request.onsuccess = function (e) {
        if (cb) {
            cb({
                error: 0,
                data : parseInt(id)
            })
        }
    };
    request.onerror = function (e) {
        if (cb) {
            cb({
                error: 1
            })
        }
    }
}

查询数据

获取所有数据

function getDataAll(dbObj, tableName, cb) {
    var transaction = dbObj.db.transaction(tableName, 'readonly');
    transaction.oncomplete = function () {
        console.log("transaction complete");
    };
    transaction.onerror = function (event) {
        console.dir(event)
    };

    var objectStore = transaction.objectStore(tableName);
    var rowData = [];
    objectStore.openCursor(IDBKeyRange.lowerBound(0)).onsuccess = function (event) {
        var cursor = event.target.result;
        if (!cursor && cb) {
            cb({
                error: 0,
                data : rowData
            });
            return;
        }
        rowData.push(cursor.value);
        cursor.continue();
    };
}

根据 id 获取数据

function getDataById(dbObj, tableName, id, cb) {
    var transaction = dbObj.db.transaction(tableName, 'readwrite');
    transaction.oncomplete = function () {
        console.log("transaction complete");
    };
    transaction.onerror = function (event) {
        console.dir(event)
    };

    var objectStore = transaction.objectStore(tableName);
    var request = objectStore.get(id);
    request.onsuccess = function (e) {
        if (cb) {
            cb({
                error: 0,
                data : e.target.result
            })
        }
    };
    request.onerror = function (e) {
        if (cb) {
            cb({
                error: 1
            })
        }
    }
}

根据关键词索引获取数据

function getDataBySearch(dbObj, tableName, keywords, cb) {
    var transaction = dbObj.db.transaction(tableName, 'readwrite');
    transaction.oncomplete = function () {
        console.log("transaction complete");
    };
    transaction.onerror = function (event) {
        console.dir(event)
    };

    var objectStore = transaction.objectStore(tableName);
    var boundKeyRange = IDBKeyRange.only(keywords);
    var rowData;
    objectStore.index("nickName").openCursor(boundKeyRange).onsuccess = function (event) {
        var cursor = event.target.result;
        if (!cursor) {
            if (cb) {
                cb({
                    error: 0,
                    data : rowData
                })
            }
            return;
        }
        rowData = cursor.value;
        cursor.continue();
    };
}

根据页码获取数据

function getDataByPager(dbObj, tableName, start, end, cb) {
    var transaction = dbObj.db.transaction(tableName, 'readwrite');
    transaction.oncomplete = function () {
        console.log("transaction complete");
    };
    transaction.onerror = function (event) {
        console.dir(event)
    };

    var objectStore = transaction.objectStore(tableName);
    var boundKeyRange = IDBKeyRange.bound(start, end, false, true);
    var rowData = [];
    objectStore.openCursor(boundKeyRange).onsuccess = function (event) {
        var cursor = event.target.result;
        if (!cursor && cb) {
            cb({
                error: 0,
                data : rowData
            });
            return;
        }
        rowData.push(cursor.value);
        cursor.continue();
    };
}

更新数据

function updateData(dbObj, tableName, id, updateData, cb) {
    var transaction = dbObj.db.transaction(tableName, 'readwrite');
    transaction.oncomplete = function () {
        console.log("transaction complete");
    };
    transaction.onerror = function (event) {
        console.dir(event)
    };

    var objectStore = transaction.objectStore(tableName);
    var request = objectStore.get(id);
    request.onsuccess = function (e) {
        var thisDB = e.target.result;
        for (key in updateData) {
            thisDB[key] = updateData[key];
        }
        objectStore.put(thisDB);
        if (cb) {
            cb({
                error: 0,
                data : thisDB
            })
        }
    };
    request.onerror = function (e) {
        if (cb) {
            cb({
                error: 1
            })
        }
    }
}

ps: 实现细节部分待有时间进行补充完善～