WebSQL浏览器数据库实例（转载）
时间：2023-04-04 23:19:01
HTML5
目前在做一个消息定时器，需要在离线环境下使用，将表单中写入的item存储在本地，在表中渲染。尝试使用Node.js读写文件，但受限于UI框架；同时测试了localStorage存储，没有达到预期的效果。最后直接使用WebSql和indexDB即可完成。以下为DEMO，实际效果正在测试中...//html创建用户数据表插入数据查询数据修改数据删除数据删除用户数据表
//JavaScriptletfindId=(id)=>document.getElementById(id);letdb=openDatabase("MySql","1.0","TestDB",210241024);letresult=db?"数据库创建成功":"数据库创建失败";letwebsql=document.getElementById("websql");websql.innerHTML=result;//创建数据表constUSER_TABLE_SQL="createtableifnotexistsuserTable(usernamevarchar(12),"+"passwordvarchar(16),infotext)";functioncreateTable(){db.transaction((tx)=>{tx.executeSql(USER_TABLE_SQL,[],(tx,result)=>{websql.innerHTML="创建用户表成功"+result;},(tx,error)=>{websql.innerHTML="创建用户表失败"+error.message;});});}//插入数据constINSERT_USER_SQL="insertintouserTable(username,password,info)values(?,?,?)";functioninsertData(user){db.transaction((tx)=>{tx.executeSql(INSERT_USER_SQL,[user.username,user.password,user.info],(tx,result)=>{websql.innerHTML="添加数据成功"+result;},(tx,error)=>{websql.innerHTML="添加数据失败"+error.message;});});}//查询数据常量QUERY_USER_SQL="select*fromuserTable";functionqueryData(){db.transaction((tx)=>{tx.executeSql(QUERY_USER_SQL,[],(tx,result)=>{websql.innerHTML="查询数据成功"+JSON.stringify(result.rows);},(tx,error)=>{websql.innerHTML="查询数据失败"+error.message;});});}//修改数据constUPDATE_USER_SQL="updateuserTablesetusername=?,password=?,info=?whererowid=1";functionupdateData(user){db.transaction((tx)=>{tx.executeSql(UPDATE_USER_SQL,[user.username,user.password,user.info],(tx,result)=>{websql.innerHTML="数据修改成功";},(tx,error)=>{websql.innerHTML="数据修改失败"+error.message;});});}//删除数据constDELETE_USER_SQL="deletefromuserTablewhererowid=(selectMax(rowid)fromuserTable)";functiondeleteData(user){db.transaction((tx)=>{tx.executeSql(DELETE_USER_SQL,[],(tx,result)=>{websql.innerHTML="删除数据成功";},(tx,error)=>{websql.innerHTML="删除数据失败"+error.message;});});}//删除数据表constDROP_USER_SQL="droptableuserTable";functiondropTable(){db.transaction((tx)=>{tx.executeSql(DROP_USER_SQL,[],(tx,result)=>{websql.innerHTML="删除数据表成功";},(tx,error)=>{websql.innerHTML="删除数据表失败"+error.message;});});}letuser={username:"李Yuchun",password:"abc123456",info:"快乐女声->中国好声音",};letbtnCreate=findId("btn-create");letbtnInsert=findId("btn-insert");letbtnQuery=findId("btn-query");让btnUpdate=findId("btn-update");letbtnDelete=findId("btn-delete");letbtnDrop=findId("btn-drop");btnCreate.onclick=()=>createTable();btnInsert.onclick=()=>insertData(user);btnQuery.onclick=()=>queryData();btnUpdate.onclick=()=>updateData(user);btnDelete.onclick=()=>deleteData(user);btnDrop.onclick=()=>dropTable();
