摘要:网上搜来一堆,,几乎没有找到满意的答案,经过汇总并结合自己的理解,封装了一套简单的是一个异步对象,必须使用回调函数方式进行调用打开一个数据库,支持两个参数,第二个参数指定版本号,我没用到,让浏览器自己创建版本号。
网上搜来一堆api,demo,几乎没有找到满意的答案,经过汇总并结合自己的理解,封装了一套简单的api
</>复制代码
// indexedDB是一个异步对象,必须使用回调函数方式进行调用
//打开一个数据库,open支持两个参数,第二个参数指定版本号,我没用到,让浏览器自己创建版本号。
var request = indexedDB.open("myDbName");
request.onsuccess = function(e) {
//拿到db对象
var db = e.target.result;
//新增一个数据表:给数据表指定一个搜索的键值
var store = db.createObjectStore("myTableName", {keyPath: "mykey"});
// 创建数据库事务(不是很理解事务二字),我理解的是:指定一个即将用来读写的数据
//除了新建数据表都用这一行代码 和上面的createObjectStore不能同时使用
var transaction = db.transaction("myTableName", "readwrite").objectStore("myTableName");
//到此,就可以进行数据库的数据表操作了
//以下四个方法不是同时使用的,是分别封装在不同方法内的,这里为了演示,全部写一起了
//增:增加一条数据 add(anything)
//一般情况下不用add,而是用put方法
var result = store.add({name:"mykey",value:"test1"});
//删:删除一条数据 delete(keyPath)
var result = store.delete("mykey");
//改:修改一条数据,一般情况下put使用比较多
var result = store.put({name:"mykey",value:"test value"});
//查:读取一条数据
var result = store.get("mykey");
result.onsuccess = function(e) {
//如果是get,这里就是读取的数据
var obj = e.target.result;
success(obj);
};
result.onerror = function(e) {
};
}
request.onerror = function() {
};
以下是我自己封装好的方法:
</>复制代码
var myDb = {
options:{
dbName:"myDbName",
tbName:"myTableName",
keyPath:"name",
},
getIndexedDB: function(name) {
var that = this;
return new Promise(function(success, error) {
// 打开数据库
var request = indexedDB.open(that.options.dbName);
request.onsuccess = function(e) {
var database = e.target.result;
// 操作数据表
var store = database.transaction(that.options.tbName, "readwrite").objectStore(that.options.tbName);
var result = store.get(name);
result.onsuccess = function(e) {
var obj = e.target.result;
success(obj);
};
result.onerror = function(e) {
error(obj);
};
}
request.onerror = function() {
error(event);
};
// 数据库不存在时,或者版本号不一致时,就会执行这里
request.onupgradeneeded = function(e) {
e.target.result.createObjectStore(that.options.tbName, { keyPath: that.options.keyPath });
};
});
},
getIndexedDBAll: function() {
var that = this;
return new Promise(function(success, error) {
// 打开数据库
var request = indexedDB.open(that.options.dbName);
request.onsuccess = function(e) {
var database = e.target.result;
// 操作数据表
var store = database.transaction(that.options.tbName, "readwrite").objectStore(that.options.tbName);
var cursorRequest = store.openCursor();
var list = [];
cursorRequest.onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
var value = cursor.value;
list.push(value);
cursor.continue();
} else {
success(list);
}
}
}
request.onerror = function() {
error(event);
};
// 数据库不存在时,或者版本号不一致时,就会执行这里
request.onupgradeneeded = function(e) {
e.target.result.createObjectStore(that.options.tbName, { keyPath: that.options.keyPath });
};
});
},
saveOneIndexedDB: function(keyValue) {
var that = this;
return new Promise(function(success, error) {
// 打开数据库
var request = indexedDB.open(that.options.dbName);
request.onsuccess = function(e) {
var database = e.target.result;
var store = null;
store = database.transaction(that.options.tbName, "readwrite").objectStore(that.options.tbName);
var result = store.put(keyValue);
result.onsuccess = function(event) {
success(keyValue);
};
result.onerror = function(event) {
error(event);
};
}
request.onerror = function(event) {
error(event)
};
// 数据库不存在时,或者版本号不一致时,就会执行这里
request.onupgradeneeded = function(e) {
var store = e.target.result.createObjectStore(that.options.tbName, { keyPath: that.options.keyPath });
var result = store.put(keyValue);
result.onsuccess = function(event) {
success(keyValue);
};
result.onerror = function(event) {
error(event);
};
};
});
},
saveListIndexedDB: function(list, back, error) {
var that = this;
return Promise.all(list.map(function(v) {
return that.saveOneIndexedDB(v);
}));
},
deleteDB: function(name) {
var that = this;
return new Promise(function(success, error) {
// 打开数据库
var request = indexedDB.open(that.options.dbName);
request.onsuccess = function(e) {
var database = e.target.result;
var store = database.transaction(that.options.tbName, "readwrite").objectStore(that.options.tbName);
var result = store.delete(name);
result.onsuccess = function(event) {
success(name)
};
result.onerror = function(event) {
error(event)
};
}
request.onerror = function(event) {
error(event)
}
// 数据库不存在时,或者版本号不一致时,就会执行这里
request.onupgradeneeded = function(e) {
e.target.result.createObjectStore(that.options.tbName, { keyPath: that.options.keyPath });
};
});
}
};
测试一下:
</>复制代码
//设置数据库名称和表名
myDb.options.dbName = "file_list";
myDb.options.tbName = "files";
//保存一条数据:
myDb.saveOneIndexedDB({
name:"test",
file:"123123",
}).then(function(file){
/**file:{
name:"test",
file:"123123",
}*/
});
//读取数据
myDb.getIndexedDB("ex_zh.js").then(function(v){console.log(v)});
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97954.html
摘要:是对标准的第五次修订。新特性语义特性赋予网页更好的意义和结构文件类型声明仅有一型。新的属性用于与用于用于。索引数据库从本质上说,允许用户在浏览器中保存大量的数据。 HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3,Java...
摘要:是对标准的第五次修订。新特性语义特性赋予网页更好的意义和结构文件类型声明仅有一型。新的属性用于与用于用于。索引数据库从本质上说,允许用户在浏览器中保存大量的数据。 HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3,Java...
摘要:是对标准的第五次修订。新特性语义特性赋予网页更好的意义和结构文件类型声明仅有一型。新的属性用于与用于用于。索引数据库从本质上说,允许用户在浏览器中保存大量的数据。 HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3,Java...
摘要:相比更加高效,包括索引事务处理和查询功能。在本地存储中,存储的数据是最多的,不像的,存储空间是无上限且永久的。由于受到的推崇。存储数据如果调用添加的数据与已存在的数据有相同的,浏览器会将新数据替换已存在的数据。 什么是IndexedDB indexedDB是一种轻量级NOSQL数据库,是由浏览器自带。相比Web Sql更加高效,包括索引、事务处理和查询功能。在HTML5本地存储中,In...
阅读 3659·2021-11-18 10:02
阅读 1033·2021-09-04 16:48
阅读 2091·2019-08-30 15:55
阅读 3648·2019-08-30 15:52
阅读 1890·2019-08-30 14:08
阅读 3631·2019-08-30 13:19
阅读 1226·2019-08-27 10:53
阅读 3211·2019-08-26 12:11