作者：yeszio | 来源：互联网 | 2020-08-09 01:04
数据库是属于服务器的，这是天经地义的事，但是有时候数据也许并非需要存储在服务器，但是这些数据也是一条一条的记录，怎么办？今天来带领你领略一下H5的一个新特性--indexedDB的风骚。你会情不自禁的发出感叹--不可思议！一、链接数据库indexedDB没有创建数据库的概念，你可以直接链接数据库，如果你链接的数据库并不存在，那么会自动的创建一个数据库。看下面的这个例子。<
数据库是属于服务器的，这是天经地义的事，但是有时候数据也许并非需要存储在服务器，但是这些数据也是一条一条的记录，怎么办？今天来带领你领略一下H5的一个新特性--indexedDB的风骚。你会情不自禁的发出感叹--不可思议！
一、链接数据库
indexedDB没有创建数据库的概念，你可以直接链接数据库，如果你链接的数据库并不存在，那么会自动的创建一个数据库。看下面的这个例子。
我点了两次链接数据库，结果是这样的。
可以看到haha数据库已经成功建立了。
indexedDB的open方法用来链接或者更新数据库，第一次创建也认为是一次更新。第一个参数是数据库的名字，第二个参数为版本号。第一次创建或者版本号发生改变时出发更新事件upgradeneeded，链接成功后出发success事件，链接出错时触发error事件。
二、建表和索引
我点了一下按钮结果时这样的。
这里用到的两个核心方法时createObjectStore，和createIndex,这两个方法必须在数据库发生更新的事件中执行。
createObjectStore方法可以理解成是创建表，接受第一个参数为一个字符串，表示表名，第二个参数是一个对象，指定主键相关的东西，{keyPath:&＃39;主键是哪个字段&＃39;,autoIncrement:是否自增}。
createIndex方法是创建索引的，接受三个参数，第一个是一个字符串，表示索引的名字，第二个参数表示字段名（谁的索引），第三个参数是个对象，具体自己查去。索引的作用是在查询操作时可以用到，不详讲，自行google吧。
三、添加数据
查询操作主要用到了游标，这个说起来还比较多，没时间说了，自行google。还有很多的操作这里不讲了。给一个我封装的不是很好的简易库，仅供参考。
一个简易库。
(function(window){&＃39;use strict&＃39;;
window.dbUtil={
indexedDB :(window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB),
IDBTransaction :(window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction),
IDBKeyRange :(window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange),
IDBCursor : (window.IDBCursor || window.webkitIDBCursor || window.msIDBCursor),
idb:null,
dbName:"",
dbVersion:"",/**
* 初始化数据库，创建表和建立链接
* @param {[type]} dbName [description]
* @param {[type]} dbVersion [description]
* @param {[type]} storeObjs [description]
* @return {[type]} [description] */initDB:function (dbName,dbVersion,storeObjs){this.dbName = dbName;this.dbVersion = dbVersion;var dbCOnnect= this.indexedDB.open(this.dbName,this.dbVersion);var self = this;
dbConnect.Onsuccess= function(e){
self.idb = e.target.result;
self.log(&＃39;数据库链接成功！&＃39;);
}
dbConnect.Onerror= function(e){
console.log(e)
self.log(&＃39;数据库链接失败!&＃39;);
}
dbConnect.Onupgradeneeded= function(e){
self.idb = e.target.result;var ts = e.target.transaction;var oldVersion = e.oldVersion;var newVersion = e.newVersion;
self.log(&＃39;数据库更新成功，旧的版本号为：&＃39;+oldVersion+",新的版本号为："+newVersion);if(storeObjs){for(var k = 0,len=storeObjs.length;k
五、使用indexedDB的优缺点
1、优点：可以将一些数据放到浏览器端，不用和服务器交互就可以实现一些功能，减轻服务器负担，加快响应速度。
2、缺点：
(1)不可靠：用户可能删处indexedDB，而且更换浏览器或者设备后这些数据就没了。
2）不便于数据采集：有很多时候将数据存到服务器是为了获得一些数据，如果放到浏览器端，这些数据比较难获取。
（3）无法共享：不同用户没办法共享数据，甚至时一个设备的不同浏览器也没法共享。
所以，是否适用indexedDB要进行一下利弊权衡，不是有了indexedDB就啥也不管，一骨脑将数据放进去。
最近两个课程设计，还有面试， 文章写的比较匆忙，如有问题请各位园友批评指正。最近找实习，各位园友要是我写的东西还可以而且公司招聘实习生的话可以给大熊一个机会，谢谢！
以上就是将数据库从服务器移到浏览器--indexedDB基本操作封装的详细内容，更多请关注 第一PHP社区 其它相关文章！
京公网安备 11010802041100号