定义
indexedDB是一种使用浏览器存储大量数据的方法.它创造的数据可以被查询,并且可以离线使用. IndexedDB对于那些需要存储大量数据,或者是需要离线使用的程序是非常有效的解决方法. indexedDB也遵从同源协议(same-origin policy). 所以你只能访问同域中存储的数据,而不能访问其他域的。
其简单而言, indexedDB就是一个基于事务操作的key-value型数前端数据库.其API大多是异步的
IndexedDB 是一个基于 JavaScript 的面向对象的事务型数据库。有了
LocalStorage
和Cookies
,为什么还要推出 indexedDB
呢?其实对于在浏览器里存储数据,可以使用 cookies
或LocalStorage
,但它们都是比较简单的技术,而 IndexedDB
提供了类似数据库风格的数据存储和使用方式。
与LocalStorage的场景和区别
- LocalStorage 是用 key-value 键值模式存储数据,它存储的数据都是字符串形式。如果你想让 LocalStorage存储对象,你需要借助 JSON.stringify()能将对象变成字符串形式,再用 JSON.parse()将字符串还原成对象,就是专门为小数量数据设计的,所以它的 api 设计为同步的。
- IndexedDB 很适合存储大量数据,它的 API 是异步调用的。IndexedDB 使用索引存储数据,各种数据库操作放在事务中执行。IndexedDB 甚至还支持简单的数据类型。
- IndexedDB 比 localstorage 强大得多,但它的 API 也相对复杂。对于简单的数据,你应该继续使用 localstorage,但当你希望存储大量数据时,IndexedDB 会明显的更适合,IndexedDB 能提供你更为复杂的查询数据的方式。
特性
键值对储存。 IndexedDB 内部采用对象仓库(object store)存放数据。所有类型的数据都可以直接存入,包括 JavaScript 对象。对象仓库中,数据以"键值对"的形式保存,每一个数据记录都有对应的主键,主键是独一无二的,不能有重复,否则会抛出一个错误。
异步。 IndexedDB 操作时不会锁死浏览器,用户依然可以进行其他操作,这与 LocalStorage 形成对比,后者的操作是同步的。异步设计是为了防止大量数据的读写,拖慢网页的表现。
支持事务。 IndexedDB 支持事务(transaction),这意味着一系列操作步骤之中,只要有一步失败,整个事务就都取消,数据库回滚到事务发生之前的状态,不存在只改写一部分数据的情况。
同源限制 IndexedDB 受到同源限制,每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库,而不能访问跨域的数据库。
储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多,一般来说不少于 250MB,甚至没有上限。
支持二进制储存。 IndexedDB 不仅可以储存字符串,还可以储存二进制数据(ArrayBuffer 对象和 Blob 对象)。
使用方式及案例
// 数据库demo
var testDB = window.indexedDB.open("testDB", 4);
var db;
testDB.onsuccess = function(event){
console.log("打开数据库");
db = event.target.result;
//创建表
var objectStore = database.createObjectStore("students", { keyPath: rollNo });
//创建事物
var tran = db.transaction(["students"],"readwrite");
//获取表
var objectStore = tran.objectStore("students");
//往表添加数据
objectStore.add({rollNo: '1', name: 'mxp'});
//根据主键获取数据
var mxp = objectStore.get('1');
//获取成功回调
mxp.onsuccess = function(event){
console.log("name : "+mxp.result.name);
};
}