indexDB

HTML5新增了一种被称为indexDB的数据库，indexDB数据库是一种存储在客户端本地的NOSQL数据库。

indexDB是一个对象数据库，而不是关系数据库。

1、创建（打开）本地数据库

语法：

// indexedDB.open("数据库名"，版本号);
var request = indexedDB.open("mydb", 1.0);

// onerror 事件表示请求失败 触发的事件
request.onerror = function () {
    console.log('创建或打开数据库失败！');
}

// onsuccess 事件表示请求成功 触发的事件
request.onsuccess = function (e) {
    console.log('创建或打开数据库成功！');

    // e.target.result; 获取的是一个IDBDatabase对象，通过这个对象可以进行增删改查；
    var db = e.target.result;
    console.log(db);
}

2、删除数据库

语法：

var request = indexedDB.deleteDatabase("数据库名");

// onerror 事件表示请求失败 触发的事件
request.onerror = function () {
    console.log('删除数据库失败！');
}

// onsuccess 事件表示请求成功 触发的事件
request.onsuccess = function (e) {
    console.log('删除数据库成功！');
}

3、操作数据库

在indexDB中，没有表这个概念，而是用对象仓库（Object Store）来代替。

简单理解就是一个对象仓库就是一张表;

3.1 - 创建对象仓库

// 创建或打开本地数据库
// 需要更新版本号触发 onupgradeneeded事件 1.0 -> 2.0
var request = indexedDB.open("myDB", 2.0);

// 失败时触发的事件
request.onerror = function () {
    console.log("创建或打开数据库失败！");
}

// 成功时触发
request.onsuccess = function () {
    console.log("创建或打开数据库成功！");
}

request.onupgradeneeded = function (e) {
    var db = e.target.result;
    
    // 如果数据库中不包含该对象仓库，则创建新的对象仓库
    // db.objectStoreNames.contains("userInfo"); 判断该仓库是否存在
    if (!db.objectStoreNames.contains("userInfo")) {
        	// 创建对象仓库
        	// db.createObjectStore("userInfo", {autoIncrement: true})
        	// {keyPath: 主键名}自定义
		    // {autoIncrement: true}递增的数字
			db.createObjectStore("userInfo", {keyPath: "UID"});
        }
}

3.2 - 增删改查

凡是涉及对象仓库的增删改查，都是使用事务来处理

3.2.1 - 增

使用事务的add()方法，来为对象仓库（ObjectStore）增加数据；

var studentsData = [
    {
        'id': 01,
        'name': 'zs',
        'age': 18
    },
    {
        'id': 02,
        'name': 'ls',
        'age': 16
    },
    {
        'id': 03,
        'name': 'wmz',
        'age': 17
    }
];

// 创建本地数据库
var DBversion = 1.0;
var localDBRequest = indexedDB.open("localDB", DBversion);

// 创建 studentsInfo 对象仓库（ObjectStore）
localDBRequest.addEventListener('upgradeneeded', function (e) {
    var db = e.target.result;

    if (!db.objectStoreNames.contains('studentsInfo')) {
        db.createObjectStore('studentsInfo', {keyPath: 'id'});
    }
});

localDBRequest.addEventListener('error', function () {
    setDBStatus(DBStatus, "数据库创建或连接失败", "error");
});

localDBRequest.addEventListener('success', function (e) {
    setDBStatus(DBStatus, "数据库创建或连接成功", "success");

    var db = e.target.result;
    console.log(db);

    // 开启事务
    var transaction = db.transaction(['studentsInfo'], 'readwrite');
	// 连接对象仓库
    var store = transaction.objectStore('studentsInfo');
    // 添加新数据
    for (var i = 0; i < studentsData.length; i++) {
        var addRequest = store.add(studentsData[i]);
        addRequest.addEventListener('error', function () {
            console.log('添加失败');
        });
        addRequest.addEventListener('success', function () {
            console.log('添加成功');
        });
    }
});

3.2.2 - 删

通过事务的delete()方法来删除对象仓库内的数据

// 基于以上的代码
localDBRequest.addEventListener('success', function (e) {
    setDBStatus(DBStatus, "数据库创建或连接成功", "success");

    var db = e.target.result;

    // 开启事务
    var transaction = db.transaction(['studentsInfo'], 'readwrite');
    // 连接对象仓库
    var store = transaction.objectStore('studentsInfo');
    // 删除数据
    store.delete(01);
});

3.2.3 - 改

localDBRequest.addEventListener('success', function (e) {
    setDBStatus(DBStatus, "数据库创建或连接成功", "success");

    var db = e.target.result;

    // 开启事务
    var transaction = db.transaction(['studentsInfo'], 'readwrite');
    // 连接对象仓库
    var store = transaction.objectStore('studentsInfo');
    // 需要更改的数据
    var changeData = {
        'id': 02,
        'name': 'zs',
        'age': 118
    }
    // 更改数据
    var handleRequest = store.put(changeData);
    handleRequest.addEventListener('error', function () {
        console.log('更改失败');
    });
    handleRequest.addEventListener('success', function () {
        console.log('更改成功');
    });
});

3.2.4 - 查

通过事务的get()方法来查询对象仓库内的数据

// 基于以上的代码
localDBRequest.addEventListener('success', function (e) {
    setDBStatus(DBStatus, "数据库创建或连接成功", "success");

    var db = e.target.result;

    // 开启事务
    var transaction = db.transaction(['studentsInfo'], 'readwrite');
    // 连接对象仓库
    var store = transaction.objectStore('studentsInfo');
    // 查询数据
    var handleRequest = store.get(02);
    handleRequest.addEventListener('error', function () {
        console.log('获取数据失败');
    });
    handleRequest.addEventListener('success', function () {
        this.result == undefined ? console.log('没有此数据') : console.log(this.result);
    });
});