indexDB 数据库增删改查操作以及创建

indexDB：从DB看[indexDB是一个非关系型数据库]它不需要去写一些特定的sql语句来对数据库进行操作，因为他是nosql(not only sql)的数据形式使用的是JSON。

indexDB的特性

1️⃣对象仓库

indexDB内部才用对象仓库（ObjectStore）存放数据[因为indexDB没有表的概念，而是ObjectStore]所有的类型的数据都可以直接存入包括JavaScript对象，ObjectStore中数据以键值对的形式保存，里面存储德每条数据和一个建值相关联（每一个数据记录都有可对应的主键，主键是独一无二的，不能有重复）

2️⃣事务性

indexDB支持事务，这意味着一系列操作步骤中，只要有一步失效，整个事务就取消，数据库回滚到事务发生之前的状态，不存在只改写一部分数据情况。在indexDB中每一个对数据库的操作都是在一个事务中上下文中执行的，事务范围一次影响一个或多个ObjectStore，通过传入一个ObjectStore名字的数组到创建事务范围的函数来定义。例如：db.transaction(storeName,'readWrite')创建事务的第二个参数是事务模式，当请求一个事务时，必须决定是按照只读还是读写模式请求访问。

3️⃣异步

indexDB操作时不会锁写浏览器，用户依然可以进行其他数据，异步设计是为了防止大量数据德读写（读取和写入）拖慢网页的表现indexDB大部分操作并不是我们常用的调用方法，返回结果的模式，而是请求——响应的模式，我们可以调用request.result来获取indexDB对象，像ajax一样，语句执行完全不代表获取到了对象，所以一般我们在回调函数中处理

4️⃣同源限制

每一个数据库对应创建他的域名，网页只能访问自身域名的DB，而不能访问跨域的DB

---

indexDB是一个比较复杂的API，它把不同的实体抽象成一个个对象接口，学习这个API就是学习他的各种接口。

DB：IDBDataStore对象

对象仓库：IDBObjectStore对象

索引：IDBIndex对象

事务：IDBTranscation对象

操作请求：IDBRequest对象

指针：IDBCursor对象

主键集合：IDBkeyRange对象

(1)数据库：数据库是一系列相关数据的容器，每个域名(协议+域名+端口)都可以新建任意多个DB,indexDB数据库有版本的概念，同一时刻只能有一个版本的DB存在，如果要修改数据库（+/-表 索引 主键）只能通过升级DB版本完成。

(2)对象仓库：每个DB包含若干个对象仓库ObjectStore它类似于关系型DB的表格

(3)数据记录：对象仓库保存的是数据记录，每条记录类似于关系型数据库德行，但是只有主键和数据俩部分。主键用来默认的索引，必须是不同的，否则会报错。主键可以是数据记录里面的一个属性，也可以指定为一个递增的证书编号。

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

(5)事务：数据记录的读写与删改，都要通过事务完成，事务对象提供error,abort和complete三个事件，用来监听操作结果 

---

var db;

1.检查浏览器是否支持indexDB

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
if(!window.indexedDB){
    console.log("你的浏览器不支持IndexedDB");
    layer.alert('您的浏览器不支持indexedDB，请升级浏览器或更换其他浏览器访问！', {icon: 6});
}

2.登录页创建数据库(每次打开登录页，数据清空)

function openDB(name,version,cw_DB){
    var version = version||1;
    var request = window.indexedDB.open(name,version);
/*这个方法只接收俩个参数，第一个参数是String表示DB的名字，如果指定的DB不存在就会新建DB；第二个参数是DB的版本，如果省略，
打开已有DB时，默认当前版本，新建DB时默认是1*/
/*indexDB.open()返回一个IDBReaquest对象，这个对象通过三种事件error(失败),success(成功),onupgradeneeded
(指定的版本号大于DB的实际版本号，就会发生DB升级事件)处理打开DB的操作结果*/
    request.onerror = function(){
        console.log("cwDB数据库创建失败或者异常~")
        deleteDB('userDB');
        var url = "";
        if(location.pathname == "/html/index.html"){
            url = "../html/login.html";
        }else {
            url = "../login.html";
        }
        top.location.href = url;
        //top.location.href = "../html/login.html";
    }
    request.onsuccess = function(e){
        cw_DB.db = e.target.result;
        db = cw_DB.db;
        console.log("cwDB数据库连接成功~")
        console.log(cw_DB);
        clearObjectStore(cw_DB.db, 'person');//清空
    }
    request.onupgradeneeded = function(e){
        console.log("cwDB数据库操作~")
        cw_DB.db=e.target.result;
        var db = e.target.result;/*拿到DB的实例*/
        console.log(db.objectStoreNames);
        //如果表格不存在，创建一个新的表格（keyPath，主键 ； autoIncrement,是否自增），会返回一个对象（objectStore）
        var objectStore = db.createObjectStore('person', {
            keyPath: "id",
            autoIncrement: false
        });
        //指定可以被索引的字段，unique字段是否唯一
        objectStore.createIndex("id", "id", {
            unique: true
        });
        objectStore.createIndex("name", "name", {
            unique: true
        });
       
    }
}

3.其他页面获取DB中的数据

function otherOpenDB(name,version,cw_DB,parameter){
    var version = version||1;
    var request = window.indexedDB.open(name,version);
    request.onerror = function(){
        console.log("cwDB数据库创建失败或者异常~")
    }
    request.onsuccess = function(e){
        cw_DB.db = e.target.result;
        db = cw_DB.db;
        console.log("cwDB数据库连接成功~")
        var transaction;
        try{
            transaction  = db.transaction(parameter.stroename,"readwrite");
        } catch (e) {
            console.log("cwDB数据库创建失败或者异常~")
            deleteDB('userDB');
            var url = "";
            if(location.pathname == "/html/index.html"){
                url = "../html/login.html";
            }else {
                url = "../login.html";
            }
            top.location.href = url;
        }

        var stroe = transaction.objectStore(parameter.stroename);
        // getData(stroe,parameter.index)
        getAllData(stroe);
    }
}

4.数据操作

function operaData(parameter){
    // var transaction  = parameter.db.transaction(parameter.stroename,"readwrite");
    var transaction;
    try{
        transaction  = db.transaction(parameter.stroename,"readwrite");
    } catch (e) {
        console.log("cwDB数据库创建失败或者异常~")
        deleteDB('userDB');
        var url = "";
        if(location.pathname == "/html/index.html"){
            url = "../html/login.html";
        }else {
            url = "../login.html";
        }
        top.location.href = url;
        //top.location.href = "../login.html";
    }
    var stroe = transaction.objectStore(parameter.stroename);
    switch(parameter.operation){
        case "add":
            addData(stroe,parameter.value);
            break;
        case "get":
            getData(stroe,parameter.index)
            break;
        case "update":
            updateData(stroe,parameter.index,parameter.obj,parameter.value);
            break;
        case "del":
            delData(stroe,parameter.index);
            break;
    }
}

5.添加数据

function addData(store,list){
    if(typeof(list)=="object"){
        for (var i =0;i<list.length;i++) {
            store.add(list[i]);
        }
    }else{
        layer.msg('添加的类型必须为对象~');
    }
}

6.读取数据

function getData(stroe,index){
    var request = stroe.get(index);
    request.onsuccess = function(e){
        var list = e.target.result;
        returnResult(list);
    }
}

7.读取全部数据

function getAllData(store){
    var result = [];
    store.openCursor().onsuccess = function(event) {
        var cursor = event.target.result;
        if (cursor) {
            // cursor.value就是数据对象
            // 游标没有遍历完，继续
            result.push(cursor.value);
            cursor.continue();
        } else {
            // 如果全部遍历完毕...
            returnResult(result);
        }
    }
}

8.更新数据

    var request = stroe.get(index);
    request.onsuccess = function(e){
        var list = e.target.result;
        list[obj] = value;
        stroe.put(list);
        console.log(list);
    }
}

9.删除数据

function delData(stroe,index){
    stroe.delete(index);
}

10.清空数据

function clearObjectStore(myDb, storeName){
    var transaction;
    try{
        transaction=myDb.transaction(storeName,'readwrite');
    } catch (e) {
        console.log("cwDB数据库创建失败或者异常~")
        deleteDB('userDB');
        var url = "";
        if(location.pathname == "/html/index.html"){
            url = "../html/login.html";
        }else {
            url = "../login.html";
        }
        top.location.href = url;
        //top.location.href = "../html/login.html";
    }
    var store=transaction.objectStore(storeName);
    store.clear();
}

11.删除数据库

function deleteDB(name) {
    window.indexedDB.deleteDatabase(name);
}

这个是在个个csdn里摘抄出来的然后自己总结出来写的，所以写的是转载不是原创，写的内容供自己学习用