初识浏览器数据库IndexedDB

定义

indexedDB是一种使用浏览器存储大量数据的方法.它创造的数据可以被查询，并且可以离线使用. IndexedDB对于那些需要存储大量数据，或者是需要离线使用的程序是非常有效的解决方法. indexedDB也遵从同源协议(same-origin policy). 所以你只能访问同域中存储的数据，而不能访问其他域的。

其简单而言, indexedDB就是一个基于事务操作的key-value型数前端数据库.其API大多是异步的 IndexedDB 是一个基于 JavaScript 的面向对象的事务型数据库。有了 LocalStorage 和Cookies，为什么还要推出 indexedDB 呢？其实对于在浏览器里存储数据，可以使用 cookies 或LocalStorage，但它们都是比较简单的技术，而 IndexedDB 提供了类似数据库风格的数据存储和使用方式。

与LocalStorage的场景和区别

1. LocalStorage 是用 key-value 键值模式存储数据，它存储的数据都是字符串形式。如果你想让 LocalStorage存储对象，你需要借助 JSON.stringify()能将对象变成字符串形式，再用 JSON.parse()将字符串还原成对象,就是专门为小数量数据设计的，所以它的 api 设计为同步的。
2. IndexedDB 很适合存储大量数据，它的 API 是异步调用的。IndexedDB 使用索引存储数据，各种数据库操作放在事务中执行。IndexedDB 甚至还支持简单的数据类型。
3. IndexedDB 比 localstorage 强大得多，但它的 API 也相对复杂。对于简单的数据，你应该继续使用 localstorage，但当你希望存储大量数据时，IndexedDB 会明显的更适合，IndexedDB 能提供你更为复杂的查询数据的方式。

特性

1. 键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以"键值对"的形式保存，每一个数据记录都有对应的主键，主键是独一无二的，不能有重复，否则会抛出一个错误。
2. 异步。 IndexedDB 操作时不会锁死浏览器，用户依然可以进行其他操作，这与 LocalStorage 形成对比，后者的操作是同步的。异步设计是为了防止大量数据的读写，拖慢网页的表现。
3. 支持事务。 IndexedDB 支持事务（transaction），这意味着一系列操作步骤之中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据的情况。
4. 同源限制 IndexedDB 受到同源限制，每一个数据库对应创建它的域名。网页只能访问自身域名下的数据库，而不能访问跨域的数据库。
5. 储存空间大 IndexedDB 的储存空间比 LocalStorage 大得多，一般来说不少于 250MB，甚至没有上限。
6. 支持二进制储存。 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);
            };
        }