IndexedDB简介IndexedDB是一种允许您将数据持久存储在用户浏览器中的方法。对于需要存储大量数据或者处于离线状态的web应用可以考虑。与已经被抛弃的WebSQL相比，目前IndexedDB似乎是未来的一个趋势，兼容性相对友好（见下图）。如果有限的localStorage（具体大小取决于各个浏览器的支持）不能满足你当前的使用需求，可以考虑使用IndexedDB。IndexedDB的存储空间取决于硬盘大小和浏览器限制规则。一般情况下，会比localStorage一般的5M大很多。此外，IndexedDB还遵守同源策略（same-originpolicy），只能访问存储在同一域中的数据。目前各大浏览器都兼容IndexedDB*数据来自caniuseIndexedDB主要特点键值对（Key-Value）存储：键是唯一的，每个键对应一个值，键可以是对象本身的一个属性，而值可以直接支持复杂的对象结构，key可以是二进制对象。支持事务：IndexedDB是一个事务数据库。所有操作都发生在事务中。索引、表和游标必须依赖于事务。此外，事务具有生命周期。可以在生命周期内使用，事物只能自动提交，不能手动操作。异步：IndexedDB的API不会通过return语句返回数据，而是需要一个回调函数来接收数据。执行API时，会向数据库发送请求。当操作完成后，数据库会以事件的形式通知你，事件的类型会告诉你操作是否成功。面向对象：indexedDB不是关系型数据库，它使用二维表来表示集合。基本操作1、打开/创建数据库indexedDB.open(databaseName,version)databaseName:数据库名称，如果当前数据库不存在则新建，如果存在则打开。version：数据库的版本，可以省略。如果省略，添加时默认为1，打开时默认为当前版本。现在新建一个数据库window.indexedDB.open('firstDB')indexedDB.open()会返回一个IDBRequest对象（IDBRequest对象代表打开数据库连接，使用open()和deleteDatabase()会返回这个对象，对于数据库操作都是基于这个对象）执行open操作后，需要注意IDBRequest对象的三个事件，success打开数据库成功，upgradeneeded数据库升级（当前指定版本大于实际版本），错误无法打开数据库。constdbName="firstDB"letmessageList=[],request,dbrequest=window.indexedDB.open(dbName,1)request.onerror=function(event){//错误处理console.error('databaseexception')}request.onsuccess=function(event){//成功db=request.result//获取数据库对象}request.onupgradeneeded=function(event){//版本变更db=event.target.result//更新数据库对象}2.创建对象仓库数据库刚创建的时候，版本从头开始发生了变化，所以会触发onupgradeneeded事件。需要注意1.keyPath主动设置主键，2.createIndex创建索引。constdbName="firstDB"letmessageList=[],request,db(f??unction(){'usestrict'if(!('indexedDB'inwindow)){//检查当前浏览器是否支持indexedDBalert("Yourbrowser不支持稳定版本的IndexedDB。")return}request=window.indexedDB.open(dbName,1)})()request.onerror=function(event){//错误处理console.error('数据库异常')}request.onsuccess=function(event){//成功db=request.result//获取数据库对象}request.onupgradeneeded=function(event){//版本变化db=event.target.result//更新数据库ObjectletobjectStoreif(!db.objectStoreNames.contains('message')){//检查message是否存在//不存在则创建messagekeyPath主动设置主键{keyPath:'id'}autoIncrement自动生成主键//新建索引参数为索引名称、索引所在属性、配置对象unique是否允许重复值objectStore=db.createObjectStore('message',{autoIncrement:true})objectStore.createIndex('time','time',{unique:true})objectStore.createIndex('content','content',{unique:false})}}3。Insert,read,traverse,update,delete数据插入需要注意createthingstransaction()第一个参数指的是操作的objectStore第二个参数操作类型可以省略默认只读readonlyread-onlyread-writeread-writefunctionwriteData(params){//第一个涉及的objectStoreparameterofcreatingthings//第二个参数操作类型可以省略').add(params)req.onsuccess=function(event){console.info('写入成功')}req.onerror=function(event){console.error('写入失败：'+event.srcElement.error.message)}}读取，查找函数readData(){lettransaction=db.transaction(['message']),objectStore=transaction.objectStore('message'),req=objectStore.get(1)req.onsuccess=function(){if(req.result){//读取成功console.log(req.result)}}req.onerror=function(){console.error('readfailed')}}functionfindData(key,value){lettransaction=db.transaction(['message'],'readonly'),store=transaction.objectStore('message'),index=store.index(key),//对应的keyreq=index.get(VAlue)//对应的搜索值req.onsuccess=function(event){//操作成功letresult=event.target.resultif(result){//有结果console.log(result)}}}遍历数据，获取所有数据functiontraversalData(){letobjectStore=db.transaction('message').objectStore('message')//openCursor(range,direction)range对象限制检索item的范围，direction可以指定whatyouwant迭代的方向objectStore.openCursor().onsuccess=function(event){letcursor=event.target.resultif(cursor){messageList.push(cursor.value)cursor.continue()//继续执行}else{console.info('obtained')}}}functionreadAllData(){//一次获取所有数据letobjectStore=db.transaction('message').objectStore('message'),allRecords=objectStore.getAll()allRecords.onsuccess=function(){messageList=allRecords.result}}更新，删除functionupdateData(params){letreq=db.transaction(['message'],'readwrite').objectStore('message').put(params)req.onsuccess=function(event){//数据已更新}req.onerror=function(event){//错误处理}}functiondeleteData(key){letreq=db.transaction(['message'],'readwrite').objectStore('message').delete(key)req.onsuccess=function(event){console.info('数据删除成功')}}IDBRequest对象，IDBRequest对象，IDBRequest对象概念加强IDBRequest对象属性是IDBRequest接口返回的事件处理函数的访问结果集，结果集来自数据库与数据库对象发起的异步查询我们对IndexedDB数据库的所有读写操作都必须通过请求来实现。请求对象最初不包含有关操作结果的任何信息。当触发请求上的事件时，可以通过IDBRequest实例上的事件处理程序访问相关信息。IDBCursor接口返回一个游标，可用于遍历数据库中的记录。游标包含指向要遍历的索引或对象存储的源。它在所属的范围内有一个位置，可以根据记录键的顺序向递增或递减的方向移动。游标使应用程序能够异步处理游标范围内的所有记录，同时允许无限数量的游标。提醒由于数据保存在用户本地，当用户主动清除数据，浏览器退出隐私模式，用户硬盘容量达到上限，或硬盘文件损坏，将无法使用做作的。
