Skip to content

I
IndexedDB

myWay / IndexedDB

通知 1
Star 1
Fork 0
I
IndexedDB

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 b9ef4321 编写于 作者: 蚂蚁上的大象's avatar 蚂蚁上的大象
浏览文件
操作

indexedDB

上级 d07e324f
隐藏空白更改
内联 并排
Showing with 475 addition and 1 deletion
IndexedDB.js 0 → 100644
浏览文件 @ b9ef4321
/*
* @Author: iYiu
* @Date: 2021-09-09 15:24:21
* @LastEditors: iYiu
* @LastEditTime: 2021-09-10 14:49:05
* @FilePath: \IndexedDB\IndexedDB.js
*/
/** 使用方法
* let db = new DB('web_DB', 'nav_text')
* let data = {name:'管理员', roleId: 1, type: 1};
* db.save('list',data).then((res)=>{
* console.log(res,'存储成功')
* })
*
* db.get('list').then((res)=>{
* console.log(res,'查询成功')
* })
* db.delete('list').then(res=>{
* console.log(res,'删除成功---->>>>>>name')
* })
* db.deleteAll().then(res=>{
* console.log(res,'清除数据库---->>>>>>name')
* })
*/
class DB {
constructor(dbName,formName){
this.dbName = dbName;
this.slqVersion = '1'; //websql的版本号，由于ios的问题，版本号的写法不一样
this.dbVersion = 1; //indexDB的版本号
this.storeName = formName; //store----即“表”的名字
this.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB, //监听IndexDB
this.db = {}; //缓存数据库，避免同一个页面重复创建和销毁
this.store = null;
this.errorCode = {
//错误码
success: 200, //成功
error: 401, //key不存在
open: 91001, //打开数据库失败的错误
save: 91002, //保存数据失败的错误
get: 91003, //获取数据失败的错误
delete: 91004, //删除数据失败的错误
deleteAll: 91005, //清空数据库失败的错误
}
}
//创建“表”
createStore(dbName) {
let txn, store;
if (this.indexedDB) {
//如果是支持IndexDB的
txn = this.db[dbName].transaction(this.storeName, 'readwrite'); //IndexDB的读写权限
store = txn.objectStore(this.storeName);
}
return store;
}
open(callback, dbName) {
let that = this;
//打开数据库
if (that.indexedDB) {
//如果支持IndexDB
if (!that.db[dbName]) {
//如果缓存中没有，则进行数据库的创建或打开，提高效率
let request = that.indexedDB.open(dbName, that.dbVersion);
request.onerror = function (e) {
callback({ code: that.errorCode.open, error: e });
};
request.onsuccess = function (e) {
if (!that.db[dbName]) {
that.db[dbName] = e.target.result;
}
let store = that.createStore(dbName);
callback(store);
};
request.onupgradeneeded = function (e) {
that.db[dbName] = e.target.result;
let store = that.db[dbName].createObjectStore(that.storeName, {
keyPath: 'key',
});
callback(store);
};
} else {
//如果缓存中已经打开了数据库，就直接使用
let store = that.createStore(dbName);
callback(store);
}
}
}
save(kay, value) {
//保存数据到数据库 kay---数据key value----数据值
let that = this;
if (that.indexedDB) {
return new Promise((resolve, reject) => {
let dbName = that.dbName;
let inData = {
key: kay,
value: value,
};
that.open(function (result) {
let error = result.hasOwnProperty('error');
if (error) {
resolve(result);
} else {
let request = result.put(inData);
request.onsuccess = function (e) {
resolve({ code: that.errorCode.success, success: true }); //保存成功有success 字段
};
request.onerror = function (e) {
resolve({ code: that.errorCode.save, error: e });
};
}
}, dbName);
});
}
}
get(kay) {
//根据key获取值
let that = this;
return new Promise((resolve, reject) => {
let dbName = that.dbName;
if (that.indexedDB) {
that.open(function (result) {
let error = result.hasOwnProperty('error'); //判断返回的数据中是否有error字段
if (error) {
reject(result);
} else {
let request = result.get(kay);
request.onsuccess = function (e) {
let result = e.target.result
let data = result? result.value : undefined;
resolve({ code: data?that.errorCode.success:that.errorCode.error, data: data||[], success: true });
};
request.onerror = function (e) {
reject({ code: that.errorCode.get, error: e });
};
}
}, dbName);
}
});
}
delete(key) {
let that = this;
return new Promise((resolve, reject)=>{
//根据key删除某条数据
let dbName = that.dbName;
if (that.indexedDB) {
that.open(function (result) {
let error = result.hasOwnProperty('error');
if (error) {
resolve(result);
} else {
let request = result.get(key);
request.onsuccess = function (e) {
let recode = e.target.result;
if (recode) {
request = result.delete(key);
}
resolve({ code: recode?that.errorCode.success:that.errorCode.error, success: true });
};
request.onerror = function (e) {
resolve({ code: that.errorCode.delete, error: e });
};
}
}, dbName);
}
})
}
deleteAll() {
let that = this;
return new Promise((resolve, reject)=>{
//清空数据库
let dbName = that.dbName;
if (that.indexedDB) {
that.open(function (result) {
let error = result.hasOwnProperty('error');
if (error) {
resolve(result);
} else {
result.clear();
resolve({ code: that.errorCode.success, success: true });
}
}, dbName);
}
})
}
}
\ No newline at end of file
README.md
浏览文件 @ b9ef4321
# sample-data-repo
#### IndexedDB
##### 介绍
浏览器数据库 IndexedDB IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。 IndexedDB 是一个比较复杂的 API，涉及不少概念。它把不同的实体，抽象成一个个对象接口。学习这个 API，就是学习它的各种对象接口。
数据库：IDBDatabase 对象 对象仓库：IDBObjectStore 对象 索引： IDBIndex 对象 事务： IDBTransaction 对象 操作请求：IDBRequest 对象 指针： IDBCursor 对象 主键集合：IDBKeyRange 对象 下面是一些主要的概念。
（1）数据库
数据库是一系列相关数据的容器。每个域名（严格的说，是协议 + 域名 + 端口）都可以新建任意多个数据库。
IndexedDB 数据库有版本的概念。同一个时刻，只能有一个版本的数据库存在。如果要修改数据库结构（新增或删除表、索引或者主键），只能通过升级数据库版本完成。
（2）对象仓库
每个数据库包含若干个对象仓库（object store）。它类似于关系型数据库的表格。
（3）数据记录
对象仓库保存的是数据记录。每条记录类似于关系型数据库的行，但是只有主键和数据体两部分。主键用来建立默认的索引，必须是不同的，否则会报错。主键可以是数据记录里面的一个属性，也可以指定为一个递增的整数编号。
上面的对象中，id属性可以当作主键。
数据体可以是任意数据类型，不限于对象。
（4）索引
为了加速数据的检索，可以在对象仓库里面，为不同的属性建立索引。
（5）事务
数据记录的读写和删改，都要通过事务完成。事务对象提供error、abort和complete三个事件，用来监听操作结果。
#### 使用方法
##### 创建DB new DB();
```js
let db = new DB('数据库名称', '表名称');
// 例
let db = new DB('web_DB', 'nav_text');
```
##### 数据存储 db.save()
```js
db.save('存储唯一Key','数据')
// 例
let data = {name:'管理员', roleId: 1, type: 1};
db.save('list',data).then((res)=>{
console.log(res,'存储成功')
})
```
##### 查询 db.get()
```js
db.get('存储唯一Key')
// 例
db.get('list').then((res)=>{
console.log(res,'查询成功')
})
```
##### 删除 db.delete()
```js
db.delete('存储唯一Key')
// 例
db.delete('list').then(res=>{
console.log(res,'删除成功---->>>>>>name')
})
```
##### 清除数据库 db.deleteAll()
```js
db.deleteAll()
// 例
db.deleteAll().then(res=>{
console.log(res,'清除数据库---->>>>>>name')
})
```
#### 错误码
name|code|describe
:--:|:--:|:--:|
success|200|成功
error|401|key不存在
open|91001|打开数据库失败的错误
save|91002|保存数据失败的错误
get|91003|获取数据失败的错误
delete|91004|删除数据失败的错误
deleteAll|91005|清空数据库失败的错误
#### Vue3 使用方法
##### 全局注册
```js
main.js
import dbClass from '@/utils/dbClass.js';
const app = createApp(App);
app.config.globalProperties.$DB = dbClass;
```
##### 使用
````js
setup() {
const { proxy } = getCurrentInstance();
let data = { theme: 'iYiu', title: 'IndexedDB' }; //将被存的数据，也可以字符串
let key = 'oneNewData'; //存数据的key值
let DB = new proxy.$DB('web_table','test');
DB.save(key, data).then(res=>{
console.log(res)
})
DB.get('oneNewData').then(res=>{
console.log(res)
})
}
````
dbClass.js 0 → 100644
浏览文件 @ b9ef4321
/*
* @Author: iYiu
* @Date: 2021-09-10 14:50:17
* @LastEditors: iYiu
* @LastEditTime: 2021-09-10 15:22:18
* @FilePath: \IndexedDB\dbClass.js
*/
export default class DB {
constructor(dbName,formName){
this.dbName = dbName;
this.slqVersion = '1'; //websql的版本号，由于ios的问题，版本号的写法不一样
this.dbVersion = 1; //indexDB的版本号
this.storeName = formName; //store----即“表”的名字
this.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB, //监听IndexDB
this.db = {}; //缓存数据库，避免同一个页面重复创建和销毁
this.store = null;
this.errorCode = {
//错误码
success: 200, //成功
error: 401, //key不存在
open: 91001, //打开数据库失败的错误
save: 91002, //保存数据失败的错误
get: 91003, //获取数据失败的错误
delete: 91004, //删除数据失败的错误
deleteAll: 91005, //清空数据库失败的错误
}
}
//创建“表”
createStore(dbName) {
let txn, store;
if (this.indexedDB) {
//如果是支持IndexDB的
txn = this.db[dbName].transaction(this.storeName, 'readwrite'); //IndexDB的读写权限
store = txn.objectStore(this.storeName);
}
return store;
}
open(callback, dbName) {
let that = this;
//打开数据库
if (that.indexedDB) {
//如果支持IndexDB
if (!that.db[dbName]) {
//如果缓存中没有，则进行数据库的创建或打开，提高效率
let request = that.indexedDB.open(dbName, that.dbVersion);
request.onerror = function (e) {
callback({ code: that.errorCode.open, error: e });
};
request.onsuccess = function (e) {
if (!that.db[dbName]) {
that.db[dbName] = e.target.result;
}
let store = that.createStore(dbName);
callback(store);
};
request.onupgradeneeded = function (e) {
that.db[dbName] = e.target.result;
let store = that.db[dbName].createObjectStore(that.storeName, {
keyPath: 'key',
});
callback(store);
};
} else {
//如果缓存中已经打开了数据库，就直接使用
let store = that.createStore(dbName);
callback(store);
}
}
}
save(kay, value) {
//保存数据到数据库 kay---数据key value----数据值
let that = this;
if (that.indexedDB) {
return new Promise((resolve, reject) => {
let dbName = that.dbName;
let inData = {
key: kay,
value: value,
};
that.open(function (result) {
let error = result.hasOwnProperty('error');
if (error) {
resolve(result);
} else {
let request = result.put(inData);
request.onsuccess = function (e) {
resolve({ code: that.errorCode.success, success: true }); //保存成功有success 字段
};
request.onerror = function (e) {
resolve({ code: that.errorCode.save, error: e });
};
}
}, dbName);
});
}
}
get(kay) {
//根据key获取值
let that = this;
return new Promise((resolve, reject) => {
let dbName = that.dbName;
if (that.indexedDB) {
that.open(function (result) {
let error = result.hasOwnProperty('error'); //判断返回的数据中是否有error字段
if (error) {
reject(result);
} else {
let request = result.get(kay);
request.onsuccess = function (e) {
let result = e.target.result
let data = result? result.value : undefined;
resolve({ code: data?that.errorCode.success:that.errorCode.error, data: data||[], success: true });
};
request.onerror = function (e) {
reject({ code: that.errorCode.get, error: e });
};
}
}, dbName);
}
});
}
delete(key) {
let that = this;
return new Promise((resolve, reject)=>{
//根据key删除某条数据
let dbName = that.dbName;
if (that.indexedDB) {
that.open(function (result) {
let error = result.hasOwnProperty('error');
if (error) {
resolve(result);
} else {
let request = result.get(key);
request.onsuccess = function (e) {
let recode = e.target.result;
if (recode) {
request = result.delete(key);
}
resolve({ code: recode?that.errorCode.success:that.errorCode.error, success: true });
};
request.onerror = function (e) {
resolve({ code: that.errorCode.delete, error: e });
};
}
}, dbName);
}
})
}
deleteAll() {
let that = this;
return new Promise((resolve, reject)=>{
//清空数据库
let dbName = that.dbName;
if (that.indexedDB) {
that.open(function (result) {
let error = result.hasOwnProperty('error');
if (error) {
resolve(result);
} else {
result.clear();
resolve({ code: that.errorCode.success, success: true });
}
}, dbName);
}
})
}
}
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或