浏览器离线缓存websql简单实现

最新推荐文章于 2025-06-15 12:00:00 发布

原创最新推荐文章于 2025-06-15 12:00:00 发布 · 902 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #缓存 #websql

本文介绍了一个使用HTML5离线应用特性与Web SQL技术实现的登录系统案例。该系统通过manifest文件定义了离线缓存资源，并利用Web SQL进行用户数据的本地存储与查询，以支持在网络连接不稳定或缺失时的正常运行。

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

一、在缓存的页面添加manifest属性。

<html lang="en" manifest="demo.appcache">

二、在mainfest所指定的文件中添加如下代码。

CACHE MANIFEST
#version 1.0

CACHE:
../html/js/jquery.js
demo.js
../html/js/md5.js
../html/js/modernizr.custom.63321.js
../html/css/style.css 
login.jsp
main.jsp

NETWORK:
*

FALLBACK:

这个文件夹中保存的是，当要缓存的页面加载完后，同时要加载的相关缓存文件。

三、创建数据库，添加数据删除数据等操作

首先要创建数据库：

		// 创建本地数据库
		function creatWebSql(username, password) {// 登陆密码已经加密
			if (db) {
				console.log('数据库存在');
				db.transaction(function(context) {
					context.executeSql('CREATE TABLE IF NOT EXISTS LOGINTABLE(USERNAME TEXT,PASSWORD TEXT)');
					context.executeSql('DELETE FROM LOGINTABLE WHERE USERNAME=?',[username]);
					context.executeSql('INSERT INTO LOGINTABLE(USERNAME,PASSWORD) VALUES(?,?)',[username,password]
					);
					console.log("查询搜索用户");
						});
			} else {
				alert('创建失败');
			}
		};

读取数据：

		function offlinelogin() {// 没有网络的时候登陆情况
			var db = openDatabase('loginMessage', '1.0', '登陆信息',
					1 * 10 * 1024);
			var username = $("#username").val();
			var password = $("#password").val();
			var md5password = (hex_md5(password));
			db.transaction(function(context) {
				context.executeSql('SELECT PASSWORD FROM LOGINTABLE WHERE USERNAME=?',
						[username], function(context, results) {
							console.log("离线数据库查询到的用户" + results.rows.length);
							var dbpassword = results.rows.item(0).PASSWORD;
							console.log(dbpassword);
							
							if (md5password == dbpassword) {
								alert("离线登陆成功,即将跳转页面")
								// 离线跳转页面
								window.location.href = "main.jsp";
							}
						}, function(context, error) {
							alert('离线登陆失败 : ' + error.message);
						});
			});

完整的登陆页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html lang="en" manifest="demo.appcache">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title></title>

<link href="${ctx}/static/css/bootstrap.min.css" rel="stylesheet"
	media="screen" />
<link rel="stylesheet" type="text/css"
	href="${ctx}/static/css/login.css" />
<script type="text/javascript" src="${ctx}/static/js/jquery.js"></script>
<script type="text/javascript" src="${ctx}/static/js/login/login.js"></script>
<!--居中显示start-->
<script type="text/javascript"
	src="${ctx}/static/js/login/center-plugin.js"></script>
<script type="text/javascript" src="${ctx}/static/js/login/md5.js"></script>
<!--居中显示end-->

<style>
.err1, .err2 {
	left: 30px;
	top: 30px;
	font-family: microsoft yahei;
	text-align: center;
}

input[type="checkbox"]:checked::after {
	content: url(${ctx}/static/images/checkmark.png);
	display: block;
	position: absolute;
	top: -3px;
	left: -3px
}
;
</style>
<!--[if lt IE 8]>  
     <script type="text/javascript">
        window.top.location="${ctx}/ie6.jsp";
    </script>
<![endif]-->
<script>
	$(function() {
		//login();
	})
</script>
</head>
<body style="position: relative; height: 100%;">
	<div class="login-tab">
		<form id="loginForm" action="" method="post">
			<input type="hidden" id="j_username" name="username" /> <input
				type="hidden" id="j_password" name="password" /> <input
				type="hidden" id="j_captcha" name="j_captcha" /> <input
				type="hidden" id="j_checkValue" name="j_checkValue" /> <input
				type="hidden" id="init_password" name="init_password" />
		</form>
		<div>
			<h4 style="text-align: center;">欢迎您</h4>
		</div>
		<div class="controls controls-row tipBox">
			<input type="text" placeholder="Username" id="username"
				name="username" data-valid="required" data-valid-required=""
				value="admin" />
		</div>
		<div class="controls controls-row tipBox">
			<input type="password" id="password" name="password"
				placeholder="Password" required value="123456" />
		</div>

		<!-- <div class="controls controls-row tipBox">
			<p class="forgot-pwd">
				<label  class="checkbox" style="float: left;">
					<input type="checkbox" name="remember-me"  value="" id="remember-2">
					<label for="remember-2">记住用户名</label>
				</label>
			</p>
		</div> -->
		<!-- <div class="controls controls-row tipBox">
				<input id="code" name="verifyCode" class="yzm" type="text" placeholder="请输入验证码"/>
		</div> -->
		<div>
			<input type="button" id="button" onclick="login()" value="登录"
				class="btn btn-success btn-block" />
		</div>

		<div class="err1" style="display: none;"></div>
		<div class="err2">
			<c:if
				test="${SPRING_SECURITY_LAST_EXCEPTION.message == 'Bad credentials'}">
				<font color="red"> 密码账号不正确 </font>
			</c:if>
			<c:if test="${param.errorCaptcha == true}">
				<font color="red">验证码输入错误</font>
			</c:if>
			<c:if test="${param.noDomain == true}">
				<font color="red">非系统用户</font>
			</c:if>
		</div>
	</div>
	<div class="bg-image" style="height: 100%;"></div>

	<script>
	var db = openDatabase('loginMessage', '1.0', '登陆信息',
			1 * 10 * 1024);
		$(function() {
			//居中
			$('.login_main').center();
			document.getElementById("username").focus();
			$("#username,#password,#authcode").keydown(function(event) {
				/* if(event.keyCode==13){
				login();
				} */
			});
		});

		//登录
		function login() {
			var errorMsg = "";
			var loginName = document.getElementById("username");
			var password = document.getElementById("password");
			var code = $("#authcode").val();
			if (!loginName.value) {
				errorMsg = " 用户名不能为空!";
				$(".err1").html(errorMsg);
				$(".err1").show();
				$(".err2").html("");

				return false;
			}
			if (!password.value) {
				errorMsg += " 密码不能为空!";
			}
			if (!code) {
				//errorMsg += " 请输入验证码!";
			}
			if (errorMsg != "") {
				$(".err1").html(errorMsg);
				$(".err1").show();
				$(".err2").html("");
			} else {
				$(".err2").html("");
				$(".err1").show();
				$(".err1").html("  正在登录中...");
				//登录处理
				if(navigator.onLine){
					alert("有网络状态");
					onlinelogin();
				}else{
					alert("网络断开");
					offlinelogin();
				}
			}
		}
		function offlinelogin() {// 没有网络的时候登陆情况
			var db = openDatabase('loginMessage', '1.0', '登陆信息',
					1 * 10 * 1024);
			var username = $("#username").val();
			var password = $("#password").val();
			var md5password = (hex_md5(password));
			db.transaction(function(context) {
				context.executeSql('SELECT PASSWORD FROM LOGINTABLE WHERE USERNAME=?',
						[username], function(context, results) {
							console.log("离线数据库查询到的用户" + results.rows.length);
							var dbpassword = results.rows.item(0).PASSWORD;
							console.log(dbpassword);
							
							if (md5password == dbpassword) {
								alert("离线登陆成功,即将跳转页面")
								// 离线跳转页面
								window.location.href = "main.jsp";
							}
						}, function(context, error) {
							alert('离线登陆失败 : ' + error.message);
						});
			});
		}
		function onlinelogin() {
			var username = $("#username").val();
			var password = $("#password").val();
			var data = {
				"username" : username,
				"password" : password
			};
			$.ajax({
				type : "get",
				url : "${ctx}/user/login?username=" + username + "&password="
						+ hex_md5(password),
				success : function(msg) {
					if (msg.code == 0) {
						creatWebSql(username, hex_md5(password));// 登陆成功将登陆信息存入本地数据库
						window.location.href = "${ctx}/home";
					} else {
						alert("Code:" + msg.code + "Message:" + msg.message);
					}
				}
			});
		}
		// 创建本地数据库
		function creatWebSql(username, password) {// 登陆密码已经加密
			if (db) {
				console.log('数据库存在');
				db.transaction(function(context) {
					context.executeSql('CREATE TABLE IF NOT EXISTS LOGINTABLE(USERNAME TEXT,PASSWORD TEXT)');
					context.executeSql('DELETE FROM LOGINTABLE WHERE USERNAME=?',[username]);
					context.executeSql('INSERT INTO LOGINTABLE(USERNAME,PASSWORD) VALUES(?,?)',[username,password]
					);
					console.log("查询搜索用户");
						});
			} else {
				alert('创建失败');
			}
		};
	</script>
</body>
</html>