indexdb开cai发keng实zhi践lu

一直在维护一个用html2canvas截图转base64保存的项目，先不说html2canvas不同版本的不同坑的问题，就说转出来的这个base64字符长度实在太大了，尤其是遇到设计出图高度达到3千多像素的时候。

之前是通过存储到localStorage来进行存储到下个页面用的，但是localStorage遇到3千多高度转出来的base64也是望长兴叹了，这时候就引入了indexdb-本地数据库的东西

indexdb

• 简介

IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库()

• 特点

（1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。

（2）异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。

（3）支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。

（4）同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库 。

（5）储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。

（6）支持二进制储存。 IndexedDB 不仅可以储存字符串，还可以储存二进制数据（ArrayBuffer 对象和 Blob 对象）

对没错，以上内容都是从阮老师那儿抄过来的，可以看看了解下。下面是具体使用包含增删改查指路

  let indexdb = indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
if (indexdb) {
    // < !--创建本地数据结构-->
    var myDB = {
        name: 'mydb001',
        version: 1,
        db: null,
        ojstore: {
            name: 'myTableName',//存储空间表的名字
            keypath: 'id'//主键
        }
    };
    var INDEXDB = {
        indexedDB: window.indexedDB || window.webkitindexedDB,
        IDBKeyRange: window.IDBKeyRange || window.webkitIDBKeyRange,//键范围
        openDB: function (dbname, dbversion, callback) {
            //建立或打开数据库，建立对象存储空间(ObjectStore)
            var self = this;
            var version = dbversion || 1;
            var request = self.indexedDB.open(dbname, version);
            request.onerror = function (e) {
                console.log(e.currentTarget.error.message);
            };
            request.onsuccess = function (e) {
                myDB.db = e.target.result;
                console.log('成功建立并打开数据库:' + myDB.name + ' version' + dbversion);
            };
            request.onupgradeneeded = function (e) {
                var db = e.target.result, transaction = e.target.transaction, store;
                if (!db.objectStoreNames.contains(myDB.ojstore.name)) {
                    //没有该对象空间时创建该对象空间
                    store = db.createObjectStore(myDB.ojstore.name, { keyPath: myDB.ojstore.keypath });
                    console.log('成功建立对象存储空间：' + myDB.ojstore.name);
                }
            }

        },
        putData: function (db, storename, data) {
            //添加数据，重复添加会更新原有数据
            var store = db.transaction(storename, 'readwrite').objectStore(storename), request;
            for (var i = 0; i < data.length; i++) {

                request = store.put(data[i]);
                request.onerror = function () {
                    console.error('put添加数据库中已有该数据')
                };
                request.onsuccess = function () {
                    console.log('put添加数据已存入数据库')
                    let href = '';
                    loading({
                        typeId: 'hideLoading',//string
                        data: {}
                    }, function (result) {//回调函数

                    })
                };
            }
        },
        clearData: function (db, storename) {
            //删除存储空间全部记录

            var store = db.transaction(storename, 'readwrite').objectStore(storename);
            store.clear();
            console.log('已删除存储空间' + storename + '全部记录');
        }
    }
    var myTableName = [{
        id: 'imgUrl',
        name: dataURL
    },];
    INDEXDB.openDB(myDB.name, myDB.version);
    setTimeout(function () {

        // console.log('******************删除全部数据************');
        INDEXDB.clearData(myDB.db, myDB.ojstore.name);
        // console.log('*******************put重复添加*************************');
        INDEXDB.putData(myDB.db, myDB.ojstore.name, myTableName);
    }, 100)

}