html5中的indexDB

1、关系型数据库和非关系型数据库

一致性：事务完成时，必须让所有的数据具有一致的状态，例如要写入100个数据，前99个成功了，结果第100个不合法，此时事务会回滚到最初状态。这样保证事务结束和开始时候的存储数据处于一致状态。

关系型数据库：一致性要求高，读写性能低，使用通用sql

非关系型数据库：灵活，key-value的形式，读写性能好，数据结构不固定

2、事务，ACID特性

事务：指对数据库一个序列上的操作，比如先执行插入，再执行更改，两个操作按顺序执行，要么都执行，要么都不执行。

ACID特性：

原子性(Atomicity)：事务中的所有操作作为一个整体提交或回滚。

一致性(Consistemcy)：事物完成时，数据必须是一致的，以保证数据的无损。

隔离性(Isolation)：对数据进行修改的多个事务是彼此隔离的。

持久性(Durability)：事务完成之后，它对于系统的影响是永久的，该修改即使出现系统故障也将一直保留。

3、数据库中的游标

是处理数据的一种方法，为了查看或者处理结果集中的数据，游标提供了在结果集中一次一行或者多行前进或向后浏览数据的能力(向后或向前浏览数据，结果集可以是表，也可以是索引)

4、数据库中锁机制的概念

执行多线程时强制限制资源访问，比如两个用户同时对数据库进行更改操作，到底是该执行谁的命令，这时候就有锁的概念.

5、索引

索引是对数据库表中一列或多列的值进行排序的一种结构，使用索引可快速访问数据库表中的特定信息。（在数据库中按照某个字段（或多个）按值排序的一种结构，然后按值查找，主要能实现快速查找和定位）

开始学习indexDB

1、indexDB的诞生：

IndexedDB 就是浏览器提供的本地非关系型数据库，它可以被网页脚本创建和操作，允许存储大量数据，提供查找和建立索引等功能

2、indexDB的特点

1、非关系型数据库（NoSQL）

2、key-value形式存储

3、异步注意localStorage是同步的

4、支持事务，索引、游标

5、同源限制

6、存储空间大 250M+

7、支持存储二进制

8、提供查找接口和能够建立索引

同源异步支持事务、索引...

3、基本概念

1、数据库

2、对象仓库相当于关系型数据库中的表

3、数据记录相当于表中的每一条记录

4、索引为了加速数据的检索，可以在对象仓库里面，为不同的属性建立索引。

5、事务

4、基本使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    *{

        margin: 0;

        padding: 0;

    }

    #btn,#update,#get{

        line-height: 30px;

        font-size: 16px;

        color: #fff;

        background-color: blue;

        padding: 0 30px;

    }

    </style>

</head>

<body>

    <button id="btn">添加数据</button>

    <button id="update">更新数据</button>

    <button id="get">获取数据</button>

    <script>

        //异步的处理方式是回调，可以用promise改写，也可以写一个发布订阅模式

        var indexDB = {

            db: null,

            dbName: "",

            objectStoreList: [],

            init: function (dbName, objectStoreList) {

                this.dbName = dbName;

                this.objectStoreList = objectStoreList.slice(0);

                this.openDB(dbName);

            },

            openDB: function (name, version) {

                var _this = this;

                version = version ? version : 1;//version不能为0

                var request = window.indexedDB.open(name, version);

                request.onerror = function (e) {

                    console.log(e.currentTarget.error.message);

                }

                request.onsuccess = function (e) {

                    _this.db = e.target.result;

                    console.log("DB " + name + " created");

                }

                request.onupgradeneeded = function (e) {

                    //创建objectStore（也就是表）

                    var db = e.target.result;

                    if (_this.objectStoreList.length != 0){

                        for(var i = 0; i < _this.objectStoreList.length; i++){

                            var item = _this.objectStoreList[i];

                            if (!db.objectStoreNames.contains(item.name)) {

                                //keyPath  键值 （也就是用哪一个字段做键）

                                var store = db.createObjectStore(item.name, { keyPath: item.keyPath });

                                //建立索引

                                if (item.index && item.index.length !== 0){

                                    for (var j = 0; j < item.index.length; j++){

                                        var innerItem = item.index[j];

                                        console.log(innerItem);

                                        store.createIndex(innerItem.name, innerItem.key, innerItem.property);

                                    }

                                }

                            }

                        }

                    }

                    console.log('DB version changed to ' + version);

                }

            },

            closeDB: function () {

                if (this.db){

                    this.db.close();

                }

            },

            deleteDB: function (){

                if (this.dbName){

                    window.indexedDB.deleteDatabase(this.dbName);

                }

                else{

                    console.log("no such DB");

                }

            },

            //清除某个objectStore的数据

            clearObjectStore: function(storeName) {

                var transaction = this.db.transaction(storeName, 'readwrite');

                var store = transaction.objectStore(storeName);

                store.clear();

            },

            deleteObjectStore: function (storeName){

                if (db.objectStoreNames.contains(storeName)) {

                    db.deleteObjectStore(storeName);

                }

            },

            //以下方法为对数据的增删改查

            addData: function (storeName, data) {

                if (!Array.isArray(data)){

                    console.error("data must be array");

                    return;

                }

                //添加数据需要用到事务

                var transaction = this.db.transaction(storeName, 'readwrite');

                var store = transaction.objectStore(storeName);

                for (var i = 0; i < data.length; i++) {

                    store.add(data[i]);

                }

                console.log("inserted!");

            },

            getDataByKey: function(storeName, key, callback) {

                var transaction = this.db.transaction(storeName, 'readwrite');

                var store = transaction.objectStore(storeName);

                var request = store.get(key);

                var _this = this;

                request.onsuccess = function (e) {

                    var result = e.target.result;

                    if (typeof callback === "function"){

                        callback.call(_this, result);

                    }

                };

            },

            updateDataByKey: function(storeName, key, data) {

                var transaction = this.db.transaction(storeName, 'readwrite');

                var store = transaction.objectStore(storeName);

                var _this = this;

                var request = store.get(key);

                var _this = this;

                request.onsuccess = function (e) {

                    var result = e.target.result;

                    result = Object.assign(result, data);

                    store.put(result);

                }

                console.log("updated!");

            },

            deleteDataByKey: function (storeName, key) {

                var transaction = this.db.transaction(storeName, 'readwrite');

                var store = transaction.objectStore(storeName);

                store.delete(key);

            },

            //关于索引和游标的使用，需要在建表的时候建立索引

            //下面利用index获取数据

            //参数: objectStore indexName value(要查找的值) callback

            getDataByIndex: function (storeName, indexName, value, callback) {

                var transaction = this.db.transaction(storeName);

                var store = transaction.objectStore(storeName);

                var index = store.index(indexName);

                var _this = this;

                index.get(value).onsuccess = function (e) {

                    var result = e.target.result;

                    if (typeof callback === "function"){

                        callback.call(_this, result);

                    }

                }

            },

            //利用游标遍历

            getMultipleDataByIndex(storeName, indexName, value, callback) {

                var transaction = this.db.transaction(storeName);

                var store = transaction.objectStore(storeName);

                var index = store.index(indexName);

                var request = index.openCursor(IDBKeyRange.only(value))

                var values = [], _this = this;

                request.onsuccess = function (e) {

                    var cursor = e.target.result;

                    if (cursor) {

                        var value = cursor.value;

                        //这里是遍历体

                        values.push(value);

                        cursor.continue();

                    }

                    else{

                        if (typeof callback === "function") {

                            callback.call(_this, values);

                        }

                    }

                }

            }

        }

        var btn = document.getElementById("btn");

        indexDB.init("testDB", [

            {

                name: "students",

                keyPath: "id",

                //索引信息

                index: [

                    {name: "nameIndex", key: "name", property: {unique: true}},

                    { name: "ageIndex", key: "age", property: { unique: false}}

                ]

            },

            {

                name: "employees",

                keyPath: "id",

            }

        ]);//创建一个数据库和多张objectStore(表)。

        //添加数据

        btn.onclick = function (e) {

            var students = [{

                id: 1001,

                name: "Byron",

                age: 24

            }, {

                id: 1002,

                name: "Frank",

                age: 30

            }, {

                id: 1003,

                name: "Aaron",

                age: 26

            }, {

                    id: 1004,

                    name: "Aaron2",

                    age: 26

            }];

            indexDB.addData("students", students);

        }

        document.getElementById("get").onclick = function (e) {

            indexDB.getDataByKey("students", 1001, function (result) {

                // console.log(this.db);  this指向indexDB

                console.log(result);

            });

            //通过索引拿数据

            //在 索引名为 nameIndex中寻找  "Frank"

            //参数: objectStore indexName value(要查找的值) callback

            indexDB.getDataByIndex("students", "nameIndex", "Frank", function (result) {

                console.log(result);

            })

            //游标遍历索引

            indexDB.getMultipleDataByIndex("students", "ageIndex", 26, function (result) {

                //这里可以获取两条数据

                console.log(result);

            })

        }

        document.getElementById("update").onclick = function (e) {

            indexDB.updateDataByKey("students", 1001, {age: 19});

            indexDB.deleteDataByKey("students", 1003);

        }

    </script>

</body>

</html>

应用场景

前端处理大量结构化的数据