indexDB浏览器数据库

背景：

现有的浏览器数据储存方案，都不适合储存大量数据

特点：

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

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

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

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

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

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

// 打开数据库
var request = window.indexedDB.open(databaseName,version);

        request.onerror=function (event) {
            console.log('数据库打开报错')
        }

    var db
    request.onsuccess=function (event) {
        db=request.result;
        console.log('数据库打开成功')
    }
    request.onupgradeneeded=function (event) {
        db=event.target.result

    }
    /*request.onupgradeneeded = function (event) {
        db=event.target.result;
        var objectStore = db.createObjectStore('person',{keyPath:'id'});

    }*/
    request.onupgradeneeded = function (event) {
        db=event.target.result
        var objectStore;
        if(!db.objectStoreNames.contains('person')){
            objectStore = db.createObjectStore('person',{keyPath:'id'});
        }
    }
    var objectStore = db.createObjectStore('person',{autoIncrement:true});
    request.onupgradeneeded=function (event) {
        db = event.target.result;
        var objectStore = db.createObjectStore('person',{keyPath:'id'})
        objectStore.createIndex('name','name',{unique:false});
        objectStore.createIndex('email','email',{unique:true});

    }
    function add() {
        var request=db.transaction(['person'],'readwrite').objectStore('person')
            .add({id:1,name:'张三',age:24,email:'zhangsan@example.com'});
        request.onsuccess=function (event) {
            console.log('数据写入成功');
        }
        request.onerror=function (event) {
            console.log('数据写入失败')
        }
    }

    add();
    function read() {
        var transaction = db.transaction(['person']);
        var objectStore = transaction.objectStore('person');
        var request = objectStore.get(1)
        request.onerror = function (event) {
            console.log('事务失败')
        }
        request.onsuccess=function (event) {
            if(request.result){
                console.log('Name:'+request.result.name);
                console.log('Age:'+request.result.age);
                console.log('Email:'+request.result.email);
            }else{
                console.log('未获得数据记录');
            }
        }
    }
    read()
    function update() {
        var request = db.transaction(['person'],'readwrite')
            .objectStore('person')
            .put({id:1,name:'李四',age:35,email:'lisi@example.com'});
        request.onsuccess=function (event) {
            console.log('数据更新成功')
        };
        request.onerror=function (event) {
            console.log('数据更新失败')
        }
    }
    update();

    function remove() {
        var request=db.transaction(['person'],'readdwrite')
            .objectStore('person')
            .delete(1);
        request.onsuccess=function (event) {
            console.log('数据删除成功');
        }
    }
    remove();

    objectStore.createIndex('name','name',{unique:false});

    var transaction = db.transaction(['person'],'readonly');
    var store = transaction.objectStore('person');
    var index=store.index('name');
    var request=index.get('李四')
    request.onsuccess=function (e) {
        var result=e.target.result;
        if(result){
           // ....
        }else{
            //....
        }
    }