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