⑴ JS登录界面如何储存用户名和密码信息,实现登录的时候查询验证匹配,不用数据库有三个用户,求JS代码
HTML代码
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<div>
用户名:<inputtype="text"name="username"id="username_input"></br>
密码:<inputtype="老罩喊password"name="passwd"id="passwd_input"></br>
<inputtype="button"value="登录"onclick="login()">
</div>
</body>
</html>
Js代码闷穗
<scripttype="text/javascript">
varaccountAll=[
{'username':'admin','passwd':'admin123'},
{'username':'jack','passwd':'jack'}
]//存储账户json数据的数组
functionlogin(){//登陆判断
varusername=document.getElementById('username_input').value;//获取username输入侍野框内容
varpasswd=document.getElementById('passwd_input').value;//获取passwd输入框内容
varaccount=accountAll.filter(function(e){returne.username==username})[0];//筛选账号返回数组,不存在则返回空数组
if(!account){
console.log('账户不存在');
}else{
if(account.username==username&&account.passwd==passwd){
console.log('登陆成功');
}else{
console.log('登陆失败');
}
}
}
</script>
⑵ 如何利用js操作cookie实现记住密码功能
【什么是cookie】
“cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。”
不同的浏览器可能对cookie的储存方式不同,但是相同的是cookie中的内容都是保存在客户一端的。(session是保存在服务器上的)
【cookie的几点注意】
说的通俗一点,cookie就是一个字符串(这点可以用alert(typeof document.cookie)来验证),用来保存一些客户信息。
程序员可以对其写入任何想写入的东西,只要不超过cookie的大小限制(4kb)。
cookie的操作办法最简单的说法就是对document.cookie进行操作(写入你要需保存的内容)。
cookie有一个关键字是expires,它是用来设置cookie的有效期的,默认情况(不设置expires)型唤是当浏览器关闭的时候,自动清除cookie。
一般来说,cookie的形式都是这样的:"cookieName1=cookie1;cookieName2=cookie2;expires=" + date,这里需要注意几点:
1.注意分号
";expires="之前的字符串你可以随便写,但卜租塌是";expires="必须遵循这个写法,尤其是这个分号不能少,不然浏览器是认不出你的expires(过期时间),而把它当成cookie内容的一部分。
例如:
如果你写成
1 <html>
2 <head>
3 <script type="text/javascript">
4 var date = new Date();
5 date.setDate(date.getDate() + 10);//date设置为十天之后
6 document.cookie = "username=findingsea^password=123^expires=" + date.toGMTString();//toGMTString方法将date转换成格林尼治时间格式
7 </script>
8 </head>
9 <body>
10
11 </body>
12 </html>
打开firefox下的选项-->隐私-->删除私人Cookie
可以到cookie过期的时间为当前会话结束时,也就是浏览器关闭的时候。换而言之,就是我们设置的expires完全没有起作用。
要fix也很容易,只要在上段代码中,在expires前加一个分号,也就型圆是改成"...^;expires=",重新运行firefox查看cookie
可以看到过期时间为10之后(今天是2012年8月31日),expires设置成功,所以说分号很重要,很重要!!!
2.如何清除cookie
其实清除cookie这种说法是不准确的,应该是说让cookie过期。因为不能直接对cookie置空,(如果以为document.cookie="",这样就能清空cookie,我只能说少年你还是太天真了),而使cookie的方法也很简单,就是设置expires。我们可以把expires设置到很久以后,让cookie能长期保存,那同样我们也能把cookie设置到过去,让cookie马上过期。这个“过去”就是1970年1月1号,我们将expires设置到这个时间,cookie就过期了。至于为什么是这个时间,请参考关于1970-1-1 00:00.000的知识 。
3.如何设置和获取cookie
<在一条cookie中设置多个变量>
JavaScript没有提供根据cookie名来获取cookie值的方法。上面已经讲过了,document.cookie只是一个字符串而已,我们就对其进行字符串解析即可。要在获取的时候进行解析,就要需要在设置的时候设置标识符,这里需要注意的点和第一点刚好相反,在第一点中,我们是千叮咛万嘱咐不要忘记分号,而且在设置标识符的时候,我建议尽量不要用分号当做分隔符,我们来看一下对比;
代码1:
1 <html>
2 <head>
3 <script type="text/javascript">
4 var date = new Date();
5 date.setDate(date.getDate() + 10);
6 document.cookie = "username=findingsea;password=123;expires=" + date.toGMTString();
7 </script>
8 </head>
9 <body>
10
11 </body>
12 </html>
代码2:
1 <html>
2 <head>
3 <script type="text/javascript">
4 var date = new Date();
5 date.setDate(date.getDate() + 10);
6 document.cookie = "username=findingsea^password=123^;expires=" + date.toGMTString();
7 </script>
8 </head>
9 <body>
10
11 </body>
12 </html>
可以很清楚地看到,代码1中的password=123都“吞掉了”,造成这个现象的原因是,浏览器在保存cookie的时候,在读到分号之后,就认为cookie的内容结束了,浏览器理想的cookie形式是"cookieName=cookie;expires=date",但是显然我们并不满足这样,所以要在一条cookie中设置多个值,就需要像代码2这样用标示符(不要分号)进行分割。然后在读取的时候,也根据标示符进行逐个读取。
<设置多个cookie>
当然当然当然,以上是正对相对复杂的需要我们在同一条cookie中设置多个变量的情况,更规范的情况是一条cookie就储存一个对象。不过这样的话,你的cookie就要占用更多的空间(相比于一条cookie中设置多个变量而已,因为你需要为每个cookie都设置一个expires)。不过这样的操作更加简单和规范,推荐在变量少的情况下使用。
⑶ 怎么用js操作cookie缓存多个用户名密码,点击缓存的信息可以直接登陆 ,类似于qq登陆时记住密码功能
JS无法直接在客户端操作cookie,没有权限,也很不安全。因为这样属于操作客户端文件了,很危险的。
运行逻辑是在浏览登陆页面的时候,浏览器会自动把对应的cookie传送给服务器,服务器返回新也面的时候,可以把COOKIE的内容传送给客户端,或是直接生产JS数组之类的,
再用JS或是新的HTM5实现下拉功能,下拉功能同步到密码框值设定。
以前很多网站不是有记住密码功能吗,还有永不过期功能吗?
你那个功能只不过是多了个选择框,并绑定密码同步改变密码框值。
⑷ 纯JS记住账号密码
参照 - 纯腊闷JS操作Cookie
点击submit按钮时,会调用此函数
文档加载完毕后,执行此函数
**说明 : **初始时,浏览器未保存差滚Cookie,JS给各个表单赋空值,赋轮庆弯复选框未勾选状态
**说明 : **未勾选保存密码复选框,JS只提交表单到指定Action,未保存Cookie,同上
**说明 : **浏览器成功保存了用户名与密码
⑸ 100分 求js写的自动登陆帐号密码保存功能~源码
/**
* 操作Cookie 添加
* @param name
* @param value
* @return
*/
function SetCookie(name,value,days)//两个参数,一个是cookie的名子,一个帆没是值
{
var Days = 30;
if(typeof(days)=="undefined"||isNaN(days))
Days=parseInt(days.toString());
//此 cookie 将被保存 30 天 -1为浏览器关闭
if(Days!=-1){
var exp = new Date(); //new Date("December 31, 9998");
exp.setTime(exp.getTime() + Days*24*60*60*1000);
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}else{
document.cookie = name + "="+ escape (value) + ";expires=-1";
}
}
/**
* 操作Cookie 提取 后台必须是escape编码
* @param name
* @return
*/
function getCookie(name)//取cookies函数
{
var arr = document.cookie.match(new RegExp("(^| )"搏搏+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;
}
/**
* 操作Cookie 删除
* @param name
* @return
*/
function delCookie(name)//删除cookie
{
var exp = new Date();
exp.setTime(exp.getTime() - (86400 * 1000 * 1));
var cval=getCookie(name);
if(cval!=null)
document.cookie = name + "="+ escape (cval) + ";expires="+exp.toGMTString();
}
/**
* 根据ID获取对象
* @param objName
* @return
*/
function GetObj(objName){
if(typeof(objName)=="undefined")
return null;
if(document.getElementById)
return eval('document.getElementById("'+objName+'")');
else
return eval('document.all.'+objName);
}
/**
* 给String 添加trim方法
*/
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
/**
* 给String添加isNullOrempty的方法
*/
String.prototype.isnullorempty=function(){
if(this==null||typeof(this)=="undefined"||this.trim()=="")
return true;
return false;
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>login.html</title>
<script type="text/javascript" src="jsTool.js"><基轿祥/script>
<script type="text/javascript">
var cookieName_username="LOGIN_USER_NAME_TEST";
var cookieName_password="LOGIN_PASSWORD_TEST";
var cookieName_autologin="LOGIN_AUTO_TEST";
//得到Cookie信息
function getUserInfoByCookie(){
var uname=getCookie(cookieName_username);
if(uname!=null&&!uname.toString().isnullorempty()){
GetObj('ttuserName').value=uname;
GetObj('ck_saveuser').checked=true;
}
var upass=getCookie(cookieName_password)
if(upass!=null&&!upass.toString().isnullorempty()){
GetObj('ttpassword').value=upass;
GetObj('ck_savepass').checked=true;
}
var autologin=getCookie(cookieName_autologin)
if(autologin!=null&&!autologin.toString().isnullorempty())
if(autologin.toString().trim()=="true"){
GetObj('ck_autologin').checked=true;
login();//登录
}
}
/**
*登录(保存信息)
*/
function login(){
var tusername=GetObj('ttuserName');
if(tusername.value.trim().isnullorempty()){
alert('您尚未输入用户名!请输入!');
tpassword.focus();
return;
}
var tpassword=GetObj('ttpassword');
if(tpassword.value.trim().isnullorempty()){
alert('您尚未输入密码!请输入!');
tpassword.focus();
return;
}
delCookie(cookieName_username);//删除用户名Cookie
var tsaveuser=GetObj('ck_saveuser');
if(tsaveuser.checked)
SetCookie(cookieName_username,tusername.value.trim(),7);//保存到Cookie中 保存7天
delCookie(cookieName_password);//删除密码
var tsavepass=GetObj('ck_savepass');
if(tsavepass.checked)
SetCookie(cookieName_password,tpassword.value.trim(),7);
var autologin=GetObj('ck_autologin');
SetCookie(cookieName_autologin,autologin.checked,7);
alert('登录成功!');
}
</script>
</head>
<body onload="getUserInfoByCookie()">
用户名:<input type="text" value="" name="ttuserName" id="ttuserName" maxlength="16"/>
密码:<input type="password" value="" name="ttpassword" id="ttpassword" maxlength="16"/>
<input type="checkbox" name="ck_saveuser" id="ck_saveuser"/>保存用户名
<input type="checkbox" name="ck_savepass" id="ck_savepass"/>保存密码
<input type="checkbox" name="ck_autologin" id="ck_autologin"/>自动登录
<input type="button" value="登录(保存)" onclick="login()"/>
</body>
</html>
能不能审批呀