WebSQL浏览器数据库实例
时间：2023-04-05 22:55:31
HTML5
最近在做一个消息定时器，需要在离线环境下使用，将表单中写入的item存储在本地，并渲染到表中。尝试使用Node.js读写文件，但受限于UI框架；同时测试了localStorage存储，没有达到预期的效果。最后直接使用WebSql和indexDB即可完成。以下为DEMO，实际效果正在测试中...//html创建用户数据表插入数据查询数据修改数据删除数据删除用户数据表
//JavaScriptletfindId=(id)=>document.getElementById(id);letdb=openDatabase("MySql","1.0","TestDB",2*1024*1024);letresult=db?"数据库创建成功":"数据库创建失败";letwebsql=document.getElementById("websql");websql.innerHTML=result;//创建数据表constUSER_TABLE_SQL="createtableifnotexistsuserTable(usernamevarchar(12),"+"密码varchar(16),信息文本)";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="Adddatafailed"+error.message;});});}//queryDataconstQUERY_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={用户名:"李宇春",密码:"abc123456",信息:"快乐女声->中国好声音",};让btnCreate=findId("btn-create");让btnInsert=findId("btn-insert");让btnQuery=findId("btn-query");让btnUpdate=findId("btn-update");让btnDelete=findId("btn-delete");让btnDrop=findId("btn-drop");btnCreate.onclick=()=>createTable();btnInsert.onclick=()=>insertData(user);btnQuery.onclick=()=>queryData();btnUpdate.onclick=()=>updateData(user);btnDelete.onclick=()=>deleteData(user);btnDrop.onclick=()=>dropTable();
