1、导入两个js文件
1）、jquery-1.4.js
2）、jquery.cookie.js
2、login.jsp页面
<%@ page language="java" contentType="text/html; charset=UTF-8" ???pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" ???content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><script type="text/javascript" ???src="${pageContext.request.contextPath}/js/jquery-1.4.js"></script><script type="text/javascript" ???src="${pageContext.request.contextPath}/js/jquery.cookie.js"></script><script type="text/javascript"> ???function addCookie(name, value, days, path) { ???????/**添加设置cookie**/ ???????var name = escape(name); ???????var value = escape(value); ???????var expires = new Date(); ???????//设置cookie保存的时间 ???????expires.setTime(expires.getTime() + days * 3600000 * 24); ???????//path=/，表示cookie能在整个网站下使用，path=/temp，表示cookie只能在temp目录下使用 ?????????path = path == "" ? "" : ";path=" + path; ???????//GMT(Greenwich Mean Time)是格林尼治平时，现在的标准时间，协调世界时是UTC ?????????//参数days只能是数字型 ?????????var _expires = (typeof days) == "string" ? "" : ";expires=" ???????????????+ expires.toUTCString(); ???????document.cookie = name + "=" + value + _expires + path; ???} ???function getCookieValue(name) { ???????/**获取cookie的值，根据cookie的键获取值**/ ???????//用处理字符串的方式查找到key对应value ?????????var name = escape(name); ???????//读cookie属性，这将返回文档的所有cookie ?????????var allcookies = document.cookie; ???????//查找名为name的cookie的开始位置 ?????????name += "="; ???????var pos = allcookies.indexOf(name); ???????//如果找到了具有该名字的cookie，那么提取并使用它的值 ?????????if (pos != -1) { //如果pos值为-1则说明搜索"version="失败 ?????????????var start = pos + name.length; //cookie值开始的位置 ?????????????var end = allcookies.indexOf(";", start); //从cookie值开始的位置起搜索第一个";"的位置,即cookie值结尾的位置 ?????????????if (end == -1) ???????????????end = allcookies.length; //如果end值为-1说明cookie列表里只有一个cookie ?????????????var value = allcookies.substring(start, end); //提取cookie的值 ?????????????return (value); //对它解码 ???????????????} else { //搜索失败，返回空字符串 ?????????????return ""; ???????} ???} ???function deleteCookie(name, path) { ???????/**根据cookie的键，删除cookie，其实就是设置其失效**/ ???????var name = escape(name); ???????var expires = new Date(0); ???????path = path == "" ? "" : ";path=" + path; ???????document.cookie = name + "=" + ";expires=" + expires.toUTCString() ???????????????+ path; ???} ???/**实现功能，保存用户的登录信息到cookie中。当登录页面被打开时，就查询cookie**/ ???window.onload = function(){ ???????//获取cookie中存放的用户名 ???????var userNameValue = getCookieValue("userName"); ???????document.getElementById("userName").value = userNameValue; ???????//获取cookie中存放的密码 ???????var userPassValue = getCookieValue("userPass"); ???????document.getElementById("password").value = userPassValue; ???????//如果账号密码为空则弹出提示，输入用户名密码 ???????if(userNameValue==""&&userPassValue==""){ ???????????????$("input[name=‘userName‘]").focus(); ???????//如果账号密码不为空则直接执行登录 ???????????}else if(userNameValue!=""&&userPassValue!=""){ ???????????????var vdata = { ???????????????userName : userNameValue, ???????????????password : userPassValue ???????????}; ???????????$.post("tevo_loginInit.action", vdata, function(data) { ???????????????if (data == "succ") { ???????????????????$(".login_info").show(); ???????????????????$(".login_info").html(" 正在登录中..."); ???????????????????location.href = "main.action"; ???????????????} else if (data == "error1") { ???????????????????alert("用户未分配角色或权限！"); ???????????????} else if (data == "error2") { ???????????????????alert("用户无效！"); ???????????????} else if (data == "error3") { ???????????????????alert("用户未分配角色！"); ???????????????} else if (data == "error4") { ???????????????????alert("用户角色未分配权限！"); ???????????????} else if (data == "error5") { ???????????????????alert("用户所分配权限未分配功能！"); ???????????????} else { ???????????????????alert("用户名或者密码错误，请重新输入！"); ???????????????} ???????????}); ???????} ???????????}; ???// 回车登录 ???function keyLogin() { ???????$("input[name=‘userName‘]").keydown(function(event) { ???????????var event = arguments.callee.caller.arguments[0] || window.event;// 消除浏览器差异 ???????????if (event.keyCode == 13) { ???????????????$("input[name=‘password‘]").focus(); ???????????} ???????}); ???????$("input[name=‘password‘]").keydown(function(event) { ???????????if (event.keyCode == 13) { ???????????????userLogin(); ???????????????document.getElementByIdx_x("userLogin").click(); ???????????} ???????}); ???} ???????function userLogin() { ???????/**用户登录，其中需要判断是否选择记住密码**/ ???????//简单验证一下 ?????????var userName = document.getElementById("userName").value; ???????if (userName == ‘‘) { ???????????alert("请输入用户名！"); ???????????return; ???????} ???????var userPass = document.getElementById("password").value; ???????if (userPass == ‘‘) { ???????????alert("请输入密码！"); ???????????return; ???????} ???????var objChk = document.getElementById("chkRememberPass"); ???????if (objChk.checked) { ???????????//添加cookie ?????????????addCookie("userName", userName, 365, "/"); ???????????addCookie("userPass", userPass, 365, "/"); ???????????var vuserName = $("#userName").val(); ???????????var vpassword = $("#password").val(); ???????????if (vuserName == "" || vuserName == undefined || vuserName == null) { ???????????????alert("用户名不能为空"); ???????????????return false; ???????????} else if (vpassword == "" || vpassword == undefined ???????????????????|| vpassword == null) { ???????????????alert("密码不能为空"); ???????????????return false; ???????????} ???????????????var vdata = { ???????????????userName : vuserName, ???????????????password : vpassword ???????????}; ???????????$.post("tevo_loginInit.action", vdata, function(data) { ???????????????if (data == "succ") { ???????????????????$(".login_info").show(); ???????????????????$(".login_info").html(" 正在登录中..."); ???????????????????location.href = "main.action"; ???????????????} else if (data == "error1") { ???????????????????alert("用户未分配角色或权限！"); ???????????????} else if (data == "error2") { ???????????????????alert("用户无效！"); ???????????????} else { ???????????????????alert("用户名或者密码错误，请重新输入！"); ???????????????} ???????????}); ???????} else { ???????????//删除cookie的内容 ???????????deleteCookie("userName", "/"); ???????????deleteCookie("userPass", "/"); ???????????var vuserName = $("#userName").val(); ???????????var vpassword = $("#password").val(); ???????????if (vuserName == "" || vuserName == undefined || vuserName == null) { ???????????????alert("用户名不能为空"); ???????????????return false; ???????????} else if (vpassword == "" || vpassword == undefined ???????????????????|| vpassword == null) { ???????????????alert("密码不能为空"); ???????????????return false; ???????????} ???????????var vdata = { ???????????????userName : vuserName, ???????????????password : vpassword ???????????}; ???????????$.post("tevo_loginInit.action", vdata, function(data) { ???????????????if (data == "succ") { ???????????????????$(".login_info").show(); ???????????????????$(".login_info").html(" 正在登录中..."); ???????????????????location.href = "main.action"; ???????????????} else if (data == "error1") { ???????????????????alert("用户未分配角色或权限！"); ???????????????} else if (data == "error2") { ???????????????????alert("用户无效！"); ???????????????} else { ???????????????????alert("用户名或者密码错误，请重新输入！"); ???????????????} ???????????}); ???????} ???}</script><title>登录</title><style type="text/css">.center-in-center { ???position: absolute; ???top: 50%; ???left: 50%;}</style></head><body background="${pageContext.request.contextPath}/images/login.jpg" ???onkeydown="keyLogin();"> ???<div class="center-in-center"> ???????<form id="login"> ???????????用户名： <input type="text" name="userName" id="userName" ???????????????placeholder="请输入用户名" /><br /> ???????????<br /> 密码： <input type="password" ???????????????name="password" id="password" placeholder="请输入密码" /> <br /> ???????????<br /> <br /> <input type="checkbox" id="chkRememberPass" ???????????????name="chkRememberPass" style="vertical-align:middle;" ???????????????checked="checked" /> <span ???????????????style="font-size:12px; color:blue; vertical-align:middle;">记住密码</span> ???????????<br /> ???????????<br /> ???????????<div align="center"> ??????????????? <input type="button" id="login" ???????????????????onclick="userLogin()" value="登录" /> ???????????????<input type="reset" value="重置" /> ???????????</div> ???????????<br /> ???????????<div class="login_info" style="display:none;"></div> ???????????<div class="login_info2"> </div> ???????</form> ???</div></body></html>jQuery cookie记住用户名密码自动登录
原文地址：https://www.cnblogs.com/shoose/p/8393735.html