环境Windows10Node.jsv18.0.0Yarn(npm或pnpm都没有问题)VSCodeChrome前言本教程直接给出方法，直接复制使用即可。需要一定的indexedDB基础知识。方法中没有使用异步，可以根据需要添加。虽然本教程只给出了Vue和React这两个JS框架的例子，但是在原生TS和JS安装中也可以直接使用功能。第三方库file-saver：用于导出文件，@types/file-saver是他的类型库dayjs：时间库，可以根据自己的喜好选择其他时间库yarnadd-Dfile-saver@types/file-saverdayjsVue。jsversionApp.vueVue.js
addLogreadDBandExportdeleteIndexedDBReact.js版本App.tsx//导入第三方库importdayjsfrom"dayjs";import{saveAs}from"file-saver";functionApp(){//定义常量constdataBaseVer:number=1;//versionconstdataBaseName:string="MyIndexedDB";//数据库名称constdataBaseStore:string="MyStore";//存储名称constdataBaseKeyPath:string="key";//主键constdataBaseLimit:number=10000;//数据限制constfilename:string=`log_${dayjs().format("YYYYMMDD")}.txt`;//导出的日志文件名//创建indexedDBconstcreateIndexedDB=():void=>{constindexed:IDBOpenDBRequest=indexedDB.open(dataBaseName,dataBaseVer);//第一次执行，因为没有版本，会触发onupgradeneeded事件，此时新建store，追加主键indexed.onupgradeneeded=(event:IDBVersionChangeEvent):void=>{constdb:IDBDatabase=(event.targetasIDBOpenDBRequest).result;if(!db.objectStoreNames.contains(dataBaseStore)){db.createObjectStore(dataBaseStore,{keyPath:dataBaseKeyPath,});creation.ex}ind}/edfailedonerror=():void=>{console.log("IndexedStartError");};};//添加日志constaddLog=(log:string):void=>{//获取日志时间戳consttime=dayjs().format("YYYY-MM-DD-HH:mm:ss:SSS");constrandom=Math.ceil(Math.random()*999);consttimeStamp=time+"_"+random+"Z";//打开数据库constindexed:IDBOpenDBRequest=indexedDB.open(dataBaseName);indexed.onsuccess=(event:Event):void=>{constdb:IDBDatabase=(event.targetasIDBOpenDBRequest).result;consttrans:IDBTransaction=db.transaction(dataBaseStore,"readwrite");常量存储：IDBObjectStore=trans.objectStore(dataBaseStore);constcount:IDBRequest=store.count();//计算记录条数，添加前检查是否超过限制count.onsuccess=():void=>{//将主键日志插入以时间戳和日志作为值的数据库store.put({[dataBaseKeyPath]:`[${timeStamp}]:${log}`});//如果没有超过则添加if(Number(count.result)<=dataBaseLimit){return;}else{//如果没有超过则删除最旧的store.openCursor().onsuccess=(event:Event):void=>{constcursor:any=(event.targetasIDBRequest).result;如果（光标）{cursor.delete();}};}};//计算记录的数量损失count.onerror=():void=>{console.log("CountError");};};//db打开失败indexed.onerror=():void=>{console.log("IndexedOpenError");};};//读取日志constreadDBandExport=():void=>{lettmp:string[]=[];//打开dbconstindexed:IDBOpenDBRequest=indexedDB.open(dataBaseName);indexed.onsuccess=(event:Event):void=>{constdb:IDBDatabase=(event.targetasIDBOpenDBRequest).result;consttrans:IDBTransaction=db.transaction(dataBaseStore,"readonly");conststore:IDBObjectStore=trans.objectStore(dataBaseStore);//遍历数据store.openCursor().onsuccess=(event:Event):void=>{constcursor:any=(event.targetasIDBRequest).result;//如果遍历的item中有数据，则放入tmp中，然后继续if(cursor){tmp.push(cursor.key);tmp.push("\r\n");游标.continue();}else{//如果遍历项中没有数据，则表示遍历结束，此时会创建一个新的blob对象constblob:Blob=newBlob(tmp,{type:"text/plain;charset=utf-8",});//导出文件saveAs(blob,filename);}}};//遍历数据失败store.openCursor().onerror=():void=>{"console.log(OpenCursorError");};};//db打开失败indexed.onerror=():void=>{console.log("IndexedOpenError");};};//删除数据库constdeleteIndexedDB=():void=>{constindexed:IDBOpenDBRequest=indexedDB.deleteDatabase(dataBaseName);//删除成功indexed.onsuccess=():void=>{console.log("删除成功");};//删除失败indexed.onerror=():void=>{console.log("删除错误");};};//调用createIndexedDB();//测试addLog("テスト");return(React.js
{addLog("ボタンからのテスト");}}>addLogreadDBandExportdeleteIndexedDB);}导出默认应用程序；验证（以Vue.js为例）启动项目后，发现数据库已经建立，点击addLog添加测试数据，然后按readDBandExport导出查看导出的文件，成功最后如果需要合并捕获console.log，请使用以下函数//日志捕获constcatchConsoleLog=()=>{console.oldLog=console.log;console.log=(log:string)=>{//打印捕获的日志console.旧日志（日志）；添加日志（日志）；};};//使用catchConsoleLog()
