浏览器数据库 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,'事务更新失败');
}
- 删除数据
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 "完整代码")
