浏览器数据库 IndexedDB

阮一峰教程

IndexedDB 是浏览器提供的本地数据库，它允许储存大量数据，提供查找接口，还能建立索引，可以在Application下直接看到该数据库。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。
类似的还有Web SQL,属于关系型数据库,但是该功能已经被逐步废弃

特点

• 异步操作
• 键值对储存
• 支持事务(transaction），意味着一系列操作中，只要有一步失败，整个事务就都取消，数据库回滚到事务发生之前的状态。
• 同源限制

基本概念

• 数据库：IDBDatabase 对象
  同一个时刻，只能有一个版本的数据库存在。如果要修改数据库结构（新增或删除表、索引或者主键），只能通过升级数据库版本完成。
• 对象仓库：IDBObjectStore 对象
  每个数据库包含若干个对象仓库（object store）。它类似于关系型数据库的表格。
• 索引： IDBIndex 对象
  为了加速数据的检索，可以在对象仓库里面，为不同的属性建立索引。
• 事务： IDBTransaction 对象
  数据记录的读写和删改，都要通过事务完成。事务对象提供error、abort和complete三个事件，用来监听操作结果。
• 操作请求：IDBRequest 对象
• 指针： IDBCursor 对象
• 主键集合：IDBKeyRange 对象

一个完整的操作流程

        var db,request = window.indexedDB.open('newDatabase', 8);

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

        request.onsuccess = function (event) {
            db = request.result;
            console.log('数据库打开成功');
            add();
            read();
            readAll();
            update();
            // remove();
            getData();
        };

        //如果指定的版本号，大于数据库的实际版本号，就会发生数据库升级事件upgradeneeded。
        //升级后自动触发success
        request.onupgradeneeded = function (event) {
            db = event.target.result;
            var objectStore;
            if (!db.objectStoreNames.contains('person')) {
                objectStore = db.createObjectStore('person', { keyPath: 'id' });//建表 名为person,主键为id
                objectStore.createIndex('name', 'name', { unique: false });
                objectStore.createIndex('email', 'email', { unique: true });//新建索引名称、索引所在的属性、配置对象（说明该属性是否允许有重复的值）
            }
            console.log('数据库升级')
        }



        function add() {
            var request = db.transaction(['person'], 'readwrite')//建立读写事务,向对象仓库写入数据记录
                .objectStore('person')
                .add({ id: 1, name: '李四', age: 15, email: '' });

            request.onsuccess = function (event) {
                console.log('数据写入成功');
            };

            request.onerror = function (event) {
                console.log('数据写入失败');
            }
        }

        function read() {
            var transaction = db.transaction(['person']);
            var objectStore = transaction.objectStore('person');
            var request = objectStore.get(3);

            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('未获得数据记录');
                }
            };
        }




        function readAll() {
            var objectStore = db.transaction('person').objectStore('person');

            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('Age: ' + cursor.value.age);
                    console.log('Email: ' + cursor.value.email);
                    cursor.continue();
                } else {
                    console.log('没有更多数据了！');
                }
            };
        }


        function update() {
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .put({ id: 1, name: '李四', age: 35, email: '[email protected]',test1:'111111111111111111111111111111111111111111111111111111',test2:'222222222222222222222222222222222222222222222' });

            request.onsuccess = function (event) {
                console.log('数据更新成功');
            };

            request.onerror = function (event) {
                console.log('数据更新失败');
            }
        }

        function remove() {
            var request = db.transaction(['person'], 'readwrite')
                .objectStore('person')
                .delete(1);

            request.onsuccess = function (event) {
                console.log('数据删除成功');
            };
        }


        function getData() {

            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) {
                    // ...
                    console.log(result)
                } else {
                    // ...
                    console.log('未找到该数据')
                }
            }

        }