一、在缓存的页面添加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>