JS使用cookie保存用户登录信息操作示例
程序员文章站
2023-12-20 18:12:58
本文实例讲述了js使用cookie保存用户登录信息。分享给大家供大家参考，具体如下：
通常cookie和session，是web开发中用于存储信息的对象，session存...
本文实例讲述了js使用cookie保存用户登录信息。分享给大家供大家参考，具体如下：
通常cookie和session，是web开发中用于存储信息的对象，session存在于服务器的内存中，而cookie则是存在客户端，所以js可以直接操作cookie进行信息的存储和读取。
js存放cookie一般的写法，如：document.cookie="username=admin";，如果是多个键值对：document.cookie="username=admin; userpass=123";
下面是js操作cookie保存用户的登录信息：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
function addcookie(name,value,days,path){ /**添加设置cookie**/
var name = escape(name);
var value = escape(value);
var expires = new date();
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(){
var usernamevalue = getcookievalue("username");
document.getelementbyid("txtusername").value = usernamevalue;
var userpassvalue = getcookievalue("userpass");
document.getelementbyid("txtuserpass").value = userpassvalue;
}
function userlogin(){ /**用户登录，其中需要判断是否选择记住密码**/
//简单验证一下
var username = document.getelementbyid("txtusername").value;
if(username == ''){
alert("请输入用户名。");
return;
}
var userpass = document.getelementbyid("txtuserpass").value;
if(userpass == ''){
alert("请输入密码。");
return;
}
var objchk = document.getelementbyid("chkrememberpass");
if(objchk.checked){
//添加cookie
addcookie("username",username,7,"/");
addcookie("userpass",userpass,7,"/");
alert("记住了你的密码登录。");
window.location.href = "http://www.baidu.com";
}else{
alert("不记密码登录。");
window.location.href = "http://www.baidu.com";
}
}
</script>
</head>
<body>
<center>
<table width="400px" height="180px" cellpadding="0" cellspacing="0" border="1" style="margin-top:100px;">
<tr>
<td align="center" colspan="2">欢迎使用xxx管理系统</td>
</tr>
<tr>
<td align="right">
<label>用户名：</label>
</td>
<td align="left">
<input type="text" id="txtusername" name="txtusername" style="width:160px; margin-left:10px;" />
</td>
</tr>
<tr>
<td align="right">
<label>密 码：</label>
</td>
<td align="left">
<input type="password" id="txtuserpass" name="txtuserpass" style="width:160px; margin-left:10px;" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<span style="font-size:12px; color:blue; vertical-align:middle;">是否记住密码</span>
<input type="checkbox" id="chkrememberpass" name="chkrememberpass" style="vertical-align:middle;" />
</td>
</tr>
<tr>
<td align="center" colspan="2">
<input type="submit" id="sublogin" name="sublogin" value="登 录" onclick="userlogin()"/>
<input type="reset" id="resetlogin" name="resetlogin" value="重 置" />
</td>
</tr>
</table>
</center>
</body>
</html>
更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript数据结构与算法技巧总结》、《javascript遍历算法与技巧总结》、《javascript查找算法技巧总结》、《javascript动画特效与技巧汇总》、《javascript错误与调试技巧总结》及《javascript数学运算用法总结》
希望本文所述对大家javascript程序设计有所帮助。