web前端-在迷惘中的探索HTML5(二)本地存储之IndexDB
2017-02-28 12:46
645 查看
今天原本打算继续出VUE系列的教程,结果由于今天被要求从数据库请求一个压缩文件,然后放置在页面上在线浏览,我就去查相关的关于HTML5的indexDB本地数据库存储,结果网上的教程一个比一个烂我愣是看了3个小时竟然没看懂(靠,老子还学过不过忘了而已),一气之下,妈的指望别人不如靠自己。于是史上最简单的indexDB教程就要问世了
早期各大浏览器使用WebSql,通过javascript接口异步调用Sqllite数据库,非HTML5标准,是早期标准,它有很多的缺点,如下:
在html中直接编写sql语句造成程序维护性差。
依赖于本地数据库版本。
微软、Mozilla等浏览器供应商已经声明放弃继续支持websql。
而新出来的Indexed DB:索引数据库,操作简便(目前主流浏览器正努力实现对index DB的支持),最主要的是我们可以很轻松的通过JS极其方便的对其调用,其支持现今主要的数据存储方式:JSON,这是它最大的优势。
看到这些对象你们一定会疑问?这能干什么?有疑问才能深究才能办大事,带着你的疑问,我们踏上解答疑问之路。
在index中我们通过
来获取IDBFactory对象,打开数据库的工厂对象
附上
由截图我们可以得知我们通过
那它又什么方法呢?既然是工厂对象,用于创建或打开数据库,那么肯定可以打开数据库。
附上
由截图我们可以得知我们通过
既然能进行创建,当然也能删除
打开了
在
这里我们常用成功的回调函数
result属性有什么用呢?你打开了数据是为了操控数据库表,而你没有数据库对象怎么操控数据库表呢?这里result属性就是
截图说明问题:
我们可以很清楚的看到result属性就是
我们打开它的原型链,可以看到它的内置函数和内置对象,如图:
close() :关闭当前数据库,释放资源。
createObjectStore(“storeName”,paramter):创建数据库表。
deleteObjectStore(“storeName”):删除当前数据库表。
transaction(storeNames, “type”):创建数据库事物管理对象。
- objectStoreNames:数据表名数组。
- version :当前数据库版本。
- name :数据库名。
这些就是一些内置方法,我们为了方便下面的使用这里就提一提。
由此我们可以发现,只有在创建或升级时,在onupgradeneeded事件中创建或修改数据表。那么如何创建表呢?于是我们再次用回
示例:
截图如下:
其中对象
add(Obj):为当前数据表增加记录。参数为JSON类型,同时返回一个
clear():清除数据表。
delete(recordKey):根据指定的key值删除记录。
get(recordKey):根据指定的key值获取完整数据。
getAll():获取当前数据表中所有数据。
count(KeyRange):清除数据表。
put(key,obj):根据指定key值修改数据表数据。
使用如下:
提示:后面还有精彩敬请期待,请大家关注我的CSDN博文:侬姝沁儿,或者我的简书专题:web前端。如有意见可以进行评论,每一条评论我都会认真对待。
前言
吹完牛逼就该拿出真本事,众所周知,HTML5出现了本地存储系列套餐,例如localStorage,sessionStorage,还有我们的主角indexDB,对于前两个以后会仔细说,今天就好好说说indexDB。早期各大浏览器使用WebSql,通过javascript接口异步调用Sqllite数据库,非HTML5标准,是早期标准,它有很多的缺点,如下:
在html中直接编写sql语句造成程序维护性差。
依赖于本地数据库版本。
微软、Mozilla等浏览器供应商已经声明放弃继续支持websql。
而新出来的Indexed DB:索引数据库,操作简便(目前主流浏览器正努力实现对index DB的支持),最主要的是我们可以很轻松的通过JS极其方便的对其调用,其支持现今主要的数据存储方式:JSON,这是它最大的优势。
indexDB主要对象介绍:
首先简单介绍一下indexDB都有哪些主要的对象?IDBFactory:打开数据库的工厂对象,用于打开数据库,并管理数据库版本。
IDBOpenDBRequest:请求对象,对数据库的访问、操作都是基于请求的,通过请求对象获取其他DOM对象。
IDBDatabase:数据库对象,封装了对数据库表的创建、编辑等功能。
IDBObjectStore:类似于数据库的数据表。
IDBIndex:数据库索引对象,用于创建数据表的索引。
IDBTransaction:数据库事物控制对象。
IDBCursor:数据库访问游标,用于访问数据。
看到这些对象你们一定会疑问?这能干什么?有疑问才能深究才能办大事,带着你的疑问,我们踏上解答疑问之路。
IDBFactory
与indexDB的获取方式
在index中我们通过var indexDB = window.indexedDB; console.log(indexDB); // IDBFactory对象
来获取IDBFactory对象,打开数据库的工厂对象
附上
console.log的截图:
由截图我们可以得知我们通过
window.indexedDB获取的其实是
IDBFactory对象。所以
IDBFactory对象是用来:打开数据库的工厂对象,用于创建或打开数据库,并管理数据库版本,封装在
window对象的
indexedDB属性中。
那它又什么方法呢?既然是工厂对象,用于创建或打开数据库,那么肯定可以打开数据库。
IDBOpenDBRequest
与打开删除indexDB数据库
// open创建或打开一个数据库,返回IDBOpenDBRequest对象 var req = indexDB.open("myIndex", 3); // 第二个参数为版本,版本只能打开最新版本-可选 console.log(req);
附上
console.log的截图:
由截图我们可以得知我们通过
indexDB.open获取的其实是
IDBOpenDBRequest对象。这是由于
IDBOpenDBRequest是请求对象,而对数据库的访问、操作都是基于请求的。
既然能进行创建,当然也能删除
indexDB.deleteDatabase('myIndex');
打开了
indexDB数据库,就是该访问它,及操控它,但这之前还有一点要说。
IDBOpenDBRequest
与indexDB
数据库的调用事件
在indexDB中有关于数据的调用事件,一个就是onsuccess成功时调用,一个是onerror失败时调用,一个是onupgradeneeded创建和维护数据表及更新ObjectStore,如下:
// 当数据打开失败时调用 req.onerror = function(){ } // 当数据打开成功时调用 req.onsuccess = function(){ } // 创建和维护数据表时调用 req.onupgradeneeded = function(){ }
这里我们常用成功的回调函数
onsuccess和创建及维护数据回调函数
onupgradeneeded,在这两个回调函数中
IDBOpenDBRequest对象的result属性中包含本次申请的结果。
IDBOpenDBRequest
对象的result属性
result属性有什么用呢?你打开了数据是为了操控数据库表,而你没有数据库对象怎么操控数据库表呢?这里result属性就是IDBDatabase数据库对象,它封装了对数据库表的创建、编辑等功能。
//当数据打开成功时调用 req.onsuccess = function(){ //在成功后对象的result属性为本次申请的结果 curDb = req.result; // curDb为数据库对象,用来操作数据表,维护数据表 console.log(curDb) }
截图说明问题:
我们可以很清楚的看到result属性就是
IDBDatabase数据库对象,这样我们就可以创建数据库表(ObjectStore)、创建事物对象。
我们打开它的原型链,可以看到它的内置函数和内置对象,如图:
IDBDatabase数据库对象的内置函数:
close() :关闭当前数据库,释放资源。
createObjectStore(“storeName”,paramter):创建数据库表。
deleteObjectStore(“storeName”):删除当前数据库表。
transaction(storeNames, “type”):创建数据库事物管理对象。
IDBDatabase数据库对象的内置属性:
- objectStoreNames:数据表名数组。
- version :当前数据库版本。
- name :数据库名。
这些就是一些内置方法,我们为了方便下面的使用这里就提一提。
onupgradeneeded与版本
前面我们说了onupgradeneeded是创建和维护数据表时调用,在我们使用indexDB.open时,其第二个参数就是版本号的意思,我们在不设置版本号时,第一次打开
indexDB时默认会为它添加一个数字1,同时调用
onupgradeneeded回调函数,在之后打开则默认使用最新的版本;我们设置版本号时,如果版本号比最新版本低则无法打开
indexDB,如果比最新版本高则认为是升级维护,采用最高的版本同时也会触发调用
onupgradeneeded回调函数。
// 当第一次创建数据库,或数据库升级时调用的事件 // 在创建或升级时,用来创建或修改数据表 // 只有在onupgradeneeded事件中,才能创建和维护数据表 req.onupgradeneeded = function(){ //创建表的结构 var db = req.result; console.log(db) }
由此我们可以发现,只有在创建或升级时,在onupgradeneeded事件中创建或修改数据表。那么如何创建表呢?于是我们再次用回
IDBDatabase对象的内置函数,其内置函数createObjectStore(),createObjectStore()有两个参数—-第一个参数表的名字,第二个参数表的一些配置:
{ // 两个无法联合使用 keyPath: '', // 系统唯一标识的id autoIncrement: '' // 由indexdb生成的唯一标识id,指明当前数据id自增长(indexdb),值是ID的名字 }
示例:
req.onupgradeneeded = function(){ //创建表的结构 var db = req.result; console.log(db) db.createObjectStore("sys_user",{ //keyPath:,//无法与autoIncrement联合使用,自己设定的id字段的字段名 autoIncrement:"user_id",//指明当前数据id自增长(indexdb) }) }
onsuccess与事物管理对象、数据库表
创建完表,我们希望在成功的回调函数里能够插入数据,所以我们得使用另外的一个对象IDBObjectStore完成数据插入功能,以及
IDBTransaction对象来创建事务管理,我们先创建数据库事务管理对象,再通过事务控制对象获取数据表对象来创建数据库表,其中transaction()有两个参数第一个是数组[]里面是表名,第二个参数是读写权限:readonly(只读)、readwrite(读写),objectStore()值是表名
req.onsuccess = function(){ //在成功后对象的result属性为本次申请的结果 curDb = req.result; // curDb为数据库对象,用来操作数据表,维护数据表 console.log(curDb) // 先创建数据库事务管理对象 var tran = curDb.transaction(["sys_user"],"readwrite"); console.log(tran) // IDBObjectStore // 再创建数据库表,通过事务控制对象获取数据表对象 var objectStore = tran.objectStore("sys_user"); console.log(objectStore) // IDBObjectStore }
截图如下:
其中对象
IDBObjectStore类似于数据库的数据表,其拥有一些内置方法可以实现表的增删改查。
IDBObjectStore的内置方法:
add(Obj):为当前数据表增加记录。参数为JSON类型,同时返回一个
IDBRequest对象
clear():清除数据表。
delete(recordKey):根据指定的key值删除记录。
get(recordKey):根据指定的key值获取完整数据。
getAll():获取当前数据表中所有数据。
count(KeyRange):清除数据表。
put(key,obj):根据指定key值修改数据表数据。
使用如下:
req.onsuccess = function(){ //在成功后对象的result属性为本次申请的结果 curDb = req.result; // curDb为数据库对象,用来操作数据表,维护数据表 console.log(curDb) // 先创建数据库事务管理对象 var tran = curDb.transaction(["sys_user"],"readwrite"); console.log(tran) // IDBObjectStore // 再创建数据库表,通过事务控制对象获取数据表对象 var objectStore = tran.objectStore("sys_user"); console.log(objectStore) // IDBObjectStore var user = { user_name: '言墨儿', sex: '男' } var adduser = objectStore.add(user); // 为当前数据表增加记录 console.log(adduser) // IDBRequest }
案例代码:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> // (1)Indexed DB: // 索引数据库,操作简便,目前主流浏览器正努力实现对index DB的支持。 // Web SQL Database实际上已经被废弃,而HTML5的支持的本地存储实际上变成了Web Storage(Local Storage和Session Storage)与IndexedDB。Web Storage使用简单字符串键值对在本地存储数据,方便灵活,但是对于大量结构化数据存储力不从心,IndexedDB是为了能够在客户端存储大量的结构化数据,并且使用索引高效检索的API。 // (2)indexDB主要对象介绍: // • IDBFactory:打开数据库的工厂对象,用于打开数据库,并管理数据库版本。 // • IDBOpenDBRequest:请求对象,对数据库的访问、操作都是基于请求的,通过请求对象获取其他DOM对象。 // • IDBDatabase:数据库对象,封装了对数据库表的创建、编辑等功能。 // • IDBObjectStore:类似于数据库的数据表。 // • IDBIndex:数据库索引对象,用于创建数据表的索引。 // • IDBTransaction:数据库事物控制对象。 // • IDBCursor:数据库访问游标,用于访问数据。 // (3)异步API // 在IndexedDB大部分操作并不是我们常用的调用方法,返回结果的模式,而是请求——响应的模式,比如打开数据库的操作 // var request=window.indexedDB.open('testDB'); // 这条指令并不会返回一个DB对象的句柄,我们得到的是一个IDBOpenDBRequest对象,而我们希望得到的DB对象在其result属性中, // 这条指令请求的响应是一个 IDBDatabase对象,这就是IndexedDB对象, // 除了result,IDBOpenDBRequest接口定义了几个重要属性 // • onerror: 请求失败的回调函数句柄 // • onsuccess:请求成功的回调函数句柄 // • onupgradeneeded:请求数据库版本变化句柄 // 所谓异步API是指并不是这条指令执行完毕,我们就可以使用request.result来获取indexedDB对象了,就像使用ajax一样,语句执行完并不代表已经获取到了对象,所以我们一般在其回调函数中处理。 </script> <script> var indexDB = window.indexedDB;//window.indexedDB获取IDBFactory,打开数据库的工厂对象,用于创建或打开数据库,并管理数据库版本 console.log(indexDB); var curDb = null; window.onload = createDB(); function createDB(){ //open创建或打开一个数据库,返回request对象 var req = indexDB.open("myIndex",3);//第二个参数为版本,版本只能打开最新版本 console.log(req); //当数据打开失败时调用 req.onerror = function(){ } //当数据打开成功时调用 req.onsuccess = function(){ //在成功后对象的result属性为本次申请的结果 curDb = req.result;//curDb为数据库对象,用来操作数据表,维护数据表 console.log(curDb) //1 普通查找提供了get getAll来查询数据 //get是根据id查询数据 //getAll是查询全部数据 //count方法来查找数据的数量 //2.使用索引查找数据 var tran = curDb.transaction(["sys_user"],"readwrite"); console.log(tran) var objectStore = tran.objectStore("sys_user"); console.log(objectStore) var user = { user_name: '言墨儿', sex: '男' } var adduser = objectStore.add(user); // 为当前数据表增加记录 console.log(adduser) } //当第一次创建数据库,或数据库升级时调用的事件 //在创建或升级时,用来创建或修改数据表 //只有在onupgradeneeded事件中,才能创建和维护数据表 req.onupgradeneeded = function(){ //创建表的结构 var db = req.result; console.log(db) db.createObjectStore("sys_user",{ //keyPath:,//无法与autoIncrement联合使用,自己设定的id字段的字段名 autoIncrement:"user_id",//指明当前数据id自增长(indexdb) }) } } //显示数据数量 function showCount(objectStore){ var reque = objectStore.count();//数据库访问方法 reque.onsuccess = function(){ var count = event.target.result; } } //显示用户列表 function showUser(objectStore){ var request = objectStore.getAllKeys(); request.onsuccess = function(){ var keys = event.currentTarget.result; for(var i = 0;i < keys.length; i++){ var id = key[i]; var obj = objectStore; var li = $("<li></li>"); li.html(list[i].username); $("#list").append(li); } } } function delDB(){ indexDB.deleteDatabase("myIndex"); } function insertUser(){ // ObjectStore对象可以完成数据的插入 // 获取ObjectStore需要的DB对象 // 用到事务对象 //获取数据的事务控制 var tran = curDb.transaction(["sys_user"],"readwrite"); //通过事务控制对象获取数据表对象 var objectStore = tran.objectStore("sys_user"); //增加一条记录,add参数是一个JSON类型 var user = { username:document.getElementById('username').value, password:document.getElementById('password').value, } var addRequest = objectStore.add(user); addRequest.onsuccess = function(){ alert("创建用户成功"); } } </script> </head> <body> <input type="button" value="创建或打开" onclick="createDB()"> <input type="button" value="删除" onclick="delDB()"> <input type="button" value="创建用户" onclick="insertUser()"> 用户名:<input type="text" id="username"> 密码:<input type="password" id="password"> </body> </html>
小结
到此关于indexDB的教程就结束了,希望大家多多支持我关注我,大家好好学习。提示:后面还有精彩敬请期待,请大家关注我的CSDN博文:侬姝沁儿,或者我的简书专题:web前端。如有意见可以进行评论,每一条评论我都会认真对待。
相关文章推荐
- 【麦子学院】03.web前端开发之html5本地存储、网页留言板、video、audio、HTML5拖放
- html5本地存储 Web Storage + indexDB
- JavaScript 实践HTML5 localStorage 本地存储Json等数据 助于移动设备和web前端开发
- web前端-在迷惘中的探索HTML5(一)定位及地图
- web前端-在迷惘中的探索HTML5(四)HTML5之拖动
- web前端-在迷惘中的探索HTML5(三)文件操作FileReader
- HTML5 本地存储1--Web Storage和本地数据库Web SQL Database
- HTML5本地存储之Web Storage篇
- HTML5本地存储之Web Storage篇
- HTML5本地存储之Web Storage篇
- 利用HTML5开发Android(4)---HTML5本地存储之Web Storage
- html5-web本地存储
- HTML5开发学习:本地存储Web Sql Database
- HTML5本地存储——Web SQL Database
- HTML5中的本地存储sessionStorage、localStorage、Web SQL Database
- html5移动web应用的本地存储
- HTML5本地存储——Web SQL Database
- html5-web本地存储
- Html5本地存储之Web SQL&nbsp…
- HTML5中的本地、WebSql、离线应用存储