随记

最新推荐文章于 2025-08-19 17:32:45 发布

原创最新推荐文章于 2025-08-19 17:32:45 发布 · 407 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery #cookie

本文介绍如何使用jQuery实现网页自动保存用户登录账号及密码的功能，并探讨正确的cookie操作方法。此外，还提供了在网页上实时显示当前日期时间（包括农历）的实现方案。

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

在页面上写一个保存账号密码的功能：

jQuery(function(){
	//获取cookie的值
	var username = $.cookie('username');
	var password = $.cookie('password');
	//将获取的值填充入输入框中
	$('#username').val(username);
	$('#userpwd').val(password); 
	if(username != null && username != '' && password != null && password != ''){//选中保存秘密的复选框
		$("#remember_password").attr('checked',true);
	}else{
		document.getElementById("username").value="";
		document.getElementById("userpwd").value="";
	}
});

function Login()
{
	var uName =$('#username').val();
	var psw = $('#userpwd').val();
	if($('#remember_password').attr('checked') == true){//保存密码
		$.cookie('username',uName, {expires:7,path:'/'});
		$.cookie('password',psw, {expires:7,path:'/'});
	}else{//删除cookie
		$.cookie('username', '', { expires: -1, path: '/' });
		$.cookie('password', '', { expires: -1, path: '/' });
	}
	//....
	//提交表单的操作
}

其中用到jquery.cookie.js和jquery-1.4.2.js

在登录时判断保存密码复选框是否被选中，若选中则创建cookie（有效期可以自己决定，下面的cookie有效期是7天），若没有选中，则删除cookie（因为可能上一次保存了密码，本次登录选择取消保存密码，所以需要删除cookie才能使下次登录时cookie没有值）。
特别注意删除cookie的操作，在网上很多文章使用的方法是$.cookie('username',null),但我使用该方法并不奏效，每次重新登录后cookie都存在，我尝试使用$.cookie('username','')仍然会有问题，程序变得不能保存密码了。

在页面上显示时间日期，包括农历:

var OA_TIME = new Date();

function time() {

	day = OA_TIME.getDay();

	month = OA_TIME.getMonth()+1;

	date = OA_TIME.getDate();

	year = OA_TIME.getFullYear();

	current = year+"年"+month+"月"+date+"日 "

	if(day==0){var weekday = "  星期日"}

	if(day==1){var weekday = "  星期一"}

	if(day==2){var weekday = "  星期二"}

	if(day==3){var weekday = "  星期三"}

	if(day==4){var weekday = "  星期四"}

	if(day==5){var weekday = "  星期五"}

	if(day==6){var weekday = "  星期六"}	

	timestr=OA_TIME.toLocaleString();

	timestr=timestr.substr(timestr.indexOf(" "));

	curr_time.innerHTML = "<span style='color:#FFF;'>" + current+" "+timestr+weekday + "</span>";

	OA_TIME.setSeconds(OA_TIME.getSeconds()+1);

	setTimeout("time()", 1000 );

}

//农历年；

function nlyear(){

var s=solarDay1()+" "+solarDay2()+" "+solarDay3();

document.getElementById("nlyear").innerHTML=s;

}

在页面上通过url的方式去查询其他系统中的数据并返回：

function back() {
	var id = $("#userId").val();
	if (id == "" || id == undefined) {
		alert("请输入用户名！");
		return;
	}
	var xmlHttp = GetXmlHttpObject();

	if (xmlHttp == null) {
		alert("您的浏览器不支持AJAX！");
		return;
	}

	var url = 'http://xxx.xxx.xxx/XXX?userId=' + id;
	xmlHttp.onreadystatechange = function() {
		if (xmlHttp.readyState == 4) {
			var responseText = xmlHttp.responseText;
			var result = eval('(' + responseText + ')');
			if (responseText == null || responseText == undefined
					|| responseText == '') {
				alert("用户不存在！");
			} else {
				var url1 = "http://xxx.xxx.xxx/XXX.jhtml";
				xmlHttp.open("GET", url1, false);
				xmlHttp.send(null);
				var responseText1 = xmlHttp.responseText;
				if (responseText1 != null || responseText1 != undefined
						|| responseText1 != '') {
					var url2 = 'http://xxx.xxx.xxx/XXX?userId='
							+ id;
					xmlHttp.open("GET", url2, false);
					xmlHttp.send(null);
					var responseText2 = xmlHttp.responseText;
					var resultr = eval('(' + responseText2 + ')');
					document.getElementById("result").innerHTML = result.count
							+ responseText1 + resultr.count;
				}
			}
		}
	};
	xmlHttp.open("GET", url, false);
	xmlHttp.send(null);
}

function GetXmlHttpObject() {
	var xmlHttp = null;
	/*try {
		// Firefox, Opera 8.0+, Safari
		xmlHttp = new XMLHttpRequest();
	} catch (e) {
		// Internet Explorer	
		try {
			xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}*/
	if (window.XMLHttpRequest)
	{
		// 针对非IE的标准浏览器
		xmlHttp = new XMLHttpRequest();
	}
	else if (window.ActiveXObject)
	{
		// 针对IE
		try
		{
			xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
		}
		catch (e)
		{
			xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
	return xmlHttp;
}

有json返回，responseText返回，根据不同系统架构。但是此方法无法解决google chrome下的跨域问题。