websql在mui中实现本地存储

最新推荐文章于 2021-12-01 10:36:12 发布

原创最新推荐文章于 2021-12-01 10:36:12 发布 · 465 阅读

0 ·

CC 4.0 BY-SA版权

html 同时被 2 个专栏收录

43 篇文章

订阅专栏

javascript

25 篇文章

订阅专栏

本文介绍了一个基于HTML5和websql的巡课管理系统，该系统能够实现数据的本地存储，并通过简单的前端界面进行数据录入及展示。文章提供了完整的源代码示例，展示了如何利用HTML5的特性完成数据的增删查改等基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>新沂市实验学校</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
	<!--App自定义的css-->
		<link rel="stylesheet" type="text/css" href="../css/app.css"/>
		<style>
			
			.title{
				margin: 0px 1px 1px;
				color: #6d6d72;
				font-size: 15px;
			}
			
			.oa-contact-cell.mui-table .mui-table-cell {
				padding: 11px 0;
				vertical-align: middle;
			}
			
			.oa-contact-cell {
				position: relative;
				margin: -11px 0;
			}
	
			.oa-contact-avatar {
				width: 75px;
			}
			.oa-contact-avatar img {
				border-radius: 50%;
			}
			.oa-contact-content {
				width: 100%;
			}
			.oa-contact-name {
				margin-right: 20px;
			}
			.oa-contact-name, oa-contact-position {
				float: left;
			}
		</style>
		
	<script src="http://libs.baidu.com/jquery/1.6.4/jquery.min.js"></script>
	 <script type="text/javascript">
	
	     function initDatabase() {//初始化数据库
	         var db = getCurrentDb();
	         if(!db) {
	             alert("您的浏览器不支持HTML5");
	             return;
	         }
	         
	
	         db.transaction(function (trans) {
	             trans.executeSql("create table if not exists Demo(uName text null,Banji text null,title text null,words text null)", [], function (trans, result) {//添加1
	                 
	             }, function (trans, message) {
	                 alert(message);
	             });
	         }, function (trans, result) {
	         }, function (trans, message) {
	         });
	     }
	
	     $(function () {
	
	         initDatabase();
	
	         $("#btnSave").click(function () {
	             var txtName = $("#txtName").val();//添加2
					var txtBanji = $("#txtBanji").val();
	             var txtTitle = $("#txtTitle").val();
	             var txtWords = $("#txtWords").val();
	
	             var db = getCurrentDb();
	
	             //插入数据
	             db.transaction(function (trans) {
	
	                 trans.executeSql("insert into Demo(uName,Banji,title,words) values(?,?,?,?) ", [txtName, txtBanji, txtTitle, txtWords], function (ts, data) {//添加2
	
	                 }, function (ts, message) {
	                     alert(message);
	                 });
	
	             });
	             showAllTheData();
	
	         });
	     });
	
	     function getCurrentDb() {
	         //打开数据库，或者直接连接数据库参数：数据库名称，版本，概述，大小
	         var db = openDatabase("myDb", "1.0", "it's to save demo data!", 1024 * 1024); ;
	         return db;
	          
	     }
	
	     function showAllTheData() {
	         $("#tblData").empty();
	         var db = getCurrentDb();
	
	         db.transaction(function (trans) {
	             trans.executeSql("select * from Demo ", [], function (ts, data) {
	                 if (data) {
	                     for (var i = 0; i < data.rows.length; i++) {
	                         appendDataToTable(data.rows.item(i));//获取某行数据的json对象
	                     }
	                 }
	             }, function (ts, message) {
	                 alert(message);
	                 var tst = message;
	             });
	
	         });
	     }
	
	     function appendDataToTable(data) {//将数据展示到表格里面
	         //uName,Banji,title,words    //添加1
	         var txtName = data.uName;//添加2
				 var txtBanji = data.Banji;
	         var txtTitle = data.title;
	         var words = data.words;
	         
	         var strHtml = "";
	         strHtml += "<tr>";
	         strHtml += "<td>"+txtName+"</td>";//添加1
				strHtml += "<td>"+txtBanji+"</td>";
	         strHtml += "<td>" + txtTitle + "</td>";
	         strHtml += "<td>" + words + "</td>";
	         strHtml += "</tr>";
	         $("#tblData").append(strHtml);
	     }
	
	 </script>	
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">巡课管理</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="#tabbar">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">巡课管理</span>
			</a>
			<a class="mui-tab-item" href="#tabbar-with-chat">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">巡课反馈</span>
			</a>
			<!-- <a class="mui-tab-item" href="#tabbar-with-contact">
				<span class="mui-icon mui-icon-contact"></span>
				<span class="mui-tab-label">通讯录</span>
			</a>-->
			<!-- <a class="mui-tab-item" href="#tabbar-with-map">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">我的</span>
			</a> -->
		</nav>
		<div class="mui-content">
			
			
			 <div id="tabbar" class="mui-control-content mui-active">
				<div class="title">

 <table>
            <tr>
                <td>时间：</td>
                <td><input type="text" name="txtName" id="txtName" required/></td>巡查纪律

            </tr>
			<tr>
			    <td>班级：</td>
			    <td><input type="text" name="txtBanji" id="txtBanji" required/></td>
			
			</tr>
               <tr>
                <td>教师：</td>
                <td><input type="text" name="txtTitle" id="txtTitle" required/></td>

            </tr>
            <tr>
                <td>评价：</td>
                <td><input type="text" name="txtWords" id="txtWords" required/></td>

            </tr>
            
         
        </table>
        <input type="button" value="保存" id="btnSave"/>

       

				</div>

			</div>
			<div id="tabbar-with-chat" class="mui-control-content">
				<div class="title">
					<hr/>
					<input type="button" value="展示数据" onclick="showAllTheData();"/>
					<table id="tblData">
					    
					</table>
				</div>
			<!--内部行为技术-->
				
				
			<!--内部行为技术-->		
			</div>
			

		</div>
	</body>
	<script src="../js/mui.min.js"></script>
	
	<script>
		mui.init({
			swipeBack:true ,//启用右滑关闭功能							 
		    
		});		
		
	</script>	
		
</html>

使用websql实现mui的本地存储，用hbuilderx内置浏览器浏览时，127.0.0.1会出现SQLError，用local host正常使用。