前端缓存-IndexedDB

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

IndexedDB 具有以下特点：

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

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

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

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

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

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

IndexedDB操作步聚：
var db; //定义数据库实例
var indexedDBInstance = {

//开打数据库

OpenDB: function() {

//打开数据库[open(参数1，参数2) 参数1：表示数据库名称 参数2：表示数据库版本]

var resquest = window.indexedDB.open("h5", 1); //返回IDBRequest 对象，IDBRequest 对象 三个事件：error、success、upgradeneeded

resquest.onerror = function() {

//error失败事件

};

resquest.onupgradeneeded = function(event) {

//upgradeneeded事件[当指定数据库版本大于当前版本时 触发版本升级事件]

//新建数据库与打开数据库是同一个操作。如果指定的数据库不存在，就会新建。不同之处在于，后续的操作主要在upgradeneeded事件的监听函数里面完成，因为这时版本从无到有，所以会触发这个事件

db = event.target.result; //获取数据库实例对象

//创建表 必须在onupgradeneeded 回调中 调用

// var objectstore = indexedDBInstance.CreateTable("User", {

// keyPath: "id"

// }, 'test');

var objectstore = indexedDBInstance.CreateTable('User', {

autoIncrement: true

}, "test");

//创建索引

var index = indexedDBInstance.CreateIndex(objectstore);

};

resquest.onsuccess = function(event) {

//success成功事件

db = event.target.result; //获取数据库实例对象

console.log('数据库打开成功');

};

},

CreateTable: function(tableName, pk, transname) {

///<summary>

///创建表

///<param name="tableName">表名</param>

///<param name="pk">设置主键对象</param>

///<param name="transname">事物名称</param>

///</summary>

if (db) {

if (!db.objectStoreNames.contains(tableName, transname)) {

//pk:{ keyPath: 'id' } 表示主键为ID

//pk:{ autoIncrement: true } 表示主键自增长

//pk:{keyPath:'foo.bar'}主键也可以指定为下一层对象的属性，比如{ foo: { bar: 'baz' } }的foo.bar也可以指定为主键。

return db.createObjectStore(tableName, pk); //返回表对象

}

}

},

CreateIndex: function(objectstore) {

//createIndex()的三个参数分别为索引名称、索引所在的属性、配置对象（说明该属性是否包含重复的值）

objectstore.createIndex('name', 'Name', {

unique: false

});

objectstore.createIndex('qq', 'QQ', {

unique: true

});

},

AddData: function() {

///<summary>

///添加数据

///</summary>

var request = db.transaction(['User'], 'readwrite')

.objectStore('User')

.add({

id: 1,

Name: '张三',

QQ: '865110135'

});

request.onsuccess = function(event) {

console.log('数据写入成功');

};

request.onerror = function(event) {

console.log('数据写入失败');

}

},

EditData: function() {

///<summary>

///编辑数据

///</summary>

var request = db.transaction(['User'], 'readwrite')

.objectStore('User')

.put({

id: 1,

Name: 'tome',

QQ: '865110135'

});

request.onsuccess = function(event) {

console.log('数据更新成功');

};

request.onerror = function(event) {

console.log('数据更新失败');

}

},

ReadData: function() {

///<summary>

///获取单条数据

///</summary>

//get(参数1) ； 参数1：键值

var request = db.transaction(['User']).objectStore('User').get(1);

request.onerror = function(event) {

console.log('事务失败');

};

request.onsuccess = function(event) {

if (request.result) {

console.log('Name: ' + request.result.Name);

console.log('QQ: ' + request.result.QQ);

} else {

console.log('未获得数据记录');

}

};

},

ReadAllData: function() {

///<summary>

///获取所有数据

///</summary>

var objectStore = db.transaction(['User']).objectStore('User');

objectStore.openCursor().onsuccess = function(event) {

var cursor = event.target.result;

if (cursor) {

console.log('Id: ' + cursor.key);

console.log('Name: ' + cursor.value.Name);

console.log('QQ: ' + cursor.value.QQ);

cursor.continue();

} else {

console.log('没有更多数据了！');

}

};

},

DelData: function() {

///<summary>

///删除数据

///</summary>

var request = db.transaction(['User'], 'readwrite')

.objectStore('User')

.delete(1); //删除主键为1的数据

request.onsuccess = function(event) {

console.log('数据删除成功');

};

},

Clear: function() {

///<summary>

///清空数据

///</summary>

var transaction = db.transaction(['User'], 'readwrite');

var store = transaction.objectStore('User');

store.clear();

},

DelObjectStore: function() {

///<summary>

///删除表[执行此全动作必须发生在版本变更动作中]

///</summary>

db.deleteObjectStore('User');

},

DelDB: function() {

///<summary>

///删除库

///</summary>

window.indexedDB.deleteDatabase("h5");

}

}