浏览器数据库 IndexedDB基础使用

一.基本概念：

基本概念就不多说，可以看官方文档，也可以看大佬文章

* 大佬文章：https://www.ruanyifeng.com/blog/2018/07/indexeddb.html
* 官方文档：https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API

二.基本使用：

1.打开数据库

var request = window.indexedDB.open(databaseName,version);
    request.onupgradeneeded = function (e) {
        db = e.target.result;
        var objectStore;
        if (!db.objectStoreNames.contains(databaseName)) {//先判断是否存在表，不存在就创建
            objectStore = db.createObjectStore(tableName,{ autoIncrement: true });//自增主键
            objectStore.createIndex('name', 'name', { unique: true });//添加索引
        }
    }
    request.onsuccess = function (e) {
        db = e.target.result;
        console.log(db,'新建数据库成功');
    }
    request.onerror = function (e) {
        console.log(e,'新建数据库失败');
    }

2.新建数据库----新建数据库与打开数据库是同一个操作。不同之处在于，后续的操作主要在upgradeneeded事件的监听函数里面完成，因为这时版本从无到有，所以会触发这个事件通常，新建数据库以后，第一件事是新建对象仓库（即新建表），在onupgradeneeded方法里

	var request = window.indexedDB.open(databaseName,version);
    request.onupgradeneeded = function (e) {
        db = e.target.result;
        var objectStore;
        if (!db.objectStoreNames.contains(databaseName)) {//先判断是否存在表，不存在就创建
            objectStore = db.createObjectStore(tableName,{ autoIncrement: true });//自增主键
            objectStore.createIndex('name', 'name', { unique: true });//添加索引
        }
    }
    request.onsuccess = function (e) {
        db = e.target.result;
        console.log(db,'新建数据库成功');
    }
    request.onerror = function (e) {
        console.log(e,'新建数据库失败');
    }

3.关闭数据库----先要打开数据库，获取到db操作对象

	db.close();

4.删除数据库（注意：数据库有时候在被其余程序占用时会被锁定，导致删除失败）

var request = window.indexedDB.deleteDatabase(databaseName);
    request.onsuccess = function (e) {
        console.log(e,"删除数据库成功");
    };
    request.onerror = function (e) {
        console.log(e,"删除数据库失败");
    };
    request.onblocked = function (e) {
        console.log(e,"数据正在被另一程序使用，锁定中");
    };
该方法只需要传入数据名称，当另一个程序在使用时，数据库会被锁定

5.新增数据

let data={ id: 1, name: '张三', age: 24, email: 'zhangsan@example.com' };
let request = db.transaction([databaseName], 'readwrite').objectStore(databaseName).add(data);
    request.onerror = function(event) {
        console.log(event,'事务添加失败');
    };
    request.onsuccess = function( event) {
        console.log(event,'事务添加成功');
    };

6.获取数据

我一般使用打开数据库方法打开或者新建数据库，我一般主键自增，单独创建索引，所以我下面可以有两种方式查询数据

//通过主键获取数据
    let data=1;
    let request = db.transaction([databaseName], 'readonly').objectStore(databaseName).get(data);
    //通过索引获取数据
    let request = db.transaction([databaseName], 'readonly').objectStore(databaseName).index('name').get('张三');
    request.onerror = (event)=> {
        console.log(event,'事务获取失败');
    };
    request.onsuccess = function ( event) {
        datas=request.result;
        console.log(datas,'事务获取成功');
    };

7.更新数据

let data={ id: 2, name: '李四', age: 25, email: 'lisi@example.com' };	
let request = db.transaction([databaseName], 'readwrite').objectStore(databaseName).put(data);
    request.onsuccess = function (event) {
        console.log(event,'事务更新成功');
    };
    request.onerror = function (event) {
        console.log(event,'事务更新失败');
    }

8. 删除数据

let data={ id: 2, name: '李四', age: 25, email: 'lisi@example.com' };	
let request = db.transaction([databaseName], 'readwrite').objectStore(databaseName).delete(data);
    request.onsuccess = function (event) {
        console.log(event,'事务删除成功');
    };
    request.onerror = function (event) {
        console.log(event,'事务删除失败');
    }

三.注意点：

• 打开数据库时，没有数据库就会新建数据库，先进onupgradeneeded方法，再进onsuccess方法；有数据库就会直接打开，直接进onsuccess方法

• 当使用数据库时，如果是在浏览器页面使用时需注意，当打开多个页面，只有最先打开数据的那个页面能使用数据库，其余页面使用不了数据库，数据库会被锁定

• 数据的那些方法都是异步操作

四.实际使用：

将网络图片缓存到本地，再从本地取出，创建本地地址，在浏览器打开

	var db;//数据库操作对象
	var databaseName='test';//数据库名称，数据库名称与表名称一致
	var urls = window.URL || window.webkitURL;//用于创建本地地址
	//图片地址
	var url="http://120.53.224.45:8000/image/baseSceneEditor/building/env/day/posx.png";
	
	
//1.先打开数据，数据库打开后获取到db再做操作
	let openRequest = window.indexedDB.open(databaseName);
    	openRequest.onupgradeneeded = function (e) {
        	db = e.target.result;
    	}
    	openRequest.onsuccess = function (e) {
        	db = e.target.result;
        	console.log(db,"打开数据库");
    	}
    	openRequest.onerror = function (e) {
        	console.log(e,'Error');
    	}
//2.获取到db再进行操作，请求网络图片，返回格式为二进制
	var oReq = new XMLHttpRequest();
    	oReq.open("GET", url);
    	oReq.responseType = "arraybuffer";
    	// oReq.responseType = "blob";
    	oReq.send();
	oReq.onload = function(e) {
        	let response = 'response' in oReq ? oReq.response : oReq.responseText
        	let blob = new Blob([response]);//将请求到的数据转为二进制存进数据库

		//将数据缓存进indexDB
        	let data={ name: url, imgData:blob};
        	let request = db.transaction([databaseName], 'readwrite').objectStore(databaseName).add(data);
        	request.onerror = function(event) {
            		console.log(event,'事务添加失败');
        	};
        	request.onsuccess = function( event) {
            		console.log(event,'事务添加成功');
        	};

    }
	
//3.从indexDB取数据，并创建本地url地址
	let request = db.transaction([databaseName], 'readwrite').objectStore(databaseName).index('name').get(url);
    	request.onerror = (event)=> {
        	console.log(event,'事务获取失败');
    	};
    	request.onsuccess = ( event)=> {
        	datas=request.result;
        	let imgData=datas.imgData;
        	let url1=urls.createObjectURL(imgData);
        	let dom=document.getElementById('img');
        	dom.src=url1;

        	console.log(datas,'事务获取成功datas');
        	console.log(imgData,'事务获取成功imgData');
        	console.log(url1,'url地址');//创建的本地url地址，可以直接在浏览器打开
    	};
		
		
		
//4.附上完整代码，[完整代码](https://files.cnblogs.com/files/dyj--php/indexDemo1.zip "完整代码")