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)
}
