网上借鉴了一些朋友的经验,做了一个小例子,js操作cookie,实现登录密码保存。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>
分享到:
相关推荐
本文实例讲述了jquery.cookie.js实现用户登录保存密码功能的方法。分享给大家供大家参考,具体如下: 需要导入的js有jquery.js和jquery.cookie.js [removed][removed] [removed][removed] 在页面加载时首先尝试...
很多登录功能上都有个“记住密码”的功能,其实无非就是对cookie的读取。 下面展示这个功能的代码,原作者已无法考究。。。。 测试方法:直接输入账号密码,提交后,刷新页面,再输入同样的账号,就可以显示 <!...
操作cookie保存用户账号和密码。自动登陆
cookie是网站设计者放置在客户端(浏览器)的小文本文件,cookie不仅能够实现保存密码功能,还可以通过cookie保存最近浏览记录增加用户体验。 在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie...
js COOKIE 记住帐号或密码 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]测试方法:加入先输入用户名jb51密码为 www.jb51.net,选择记住密码,然后关闭后,重新打开页面,在用户名里面输入jb51,则密码会自动...
使用jquery.cookie.js实现记住密码 使用tool.js对账户密码加密解密
作用:在浏览器中进行数据的存储,用户名、密码(比如:保存页面信息,自动登录等)。 特点: cookie需要在服务器环境下运行; cookie的容量在4kb左右,限制为每个域名50个cookie个数(IE),不同浏览器容量和个数...
SessionBox / MultiLogin 多次登录网站-使用JavaScript的Cookie网站隔离。 同时登录到同一站点上的多个帐户。英语网站通常使用cookie来记录用户的唯一标识符。 无需在每次请求时都再次询问他的登录名/密码。 Cookies...
(1)系统实现手机号+验证码、手机号+密码的注册方式,实现手机号+验证码、手机号+密码、Github登录、QQ登录的登录方式,并使用cookie保存用户登录信息。 (2)系统实现用户可以根据不同的文章分类来发表文章、编辑...
登录或登录后保存会话和cookie。 Google身份验证(使用Google登录和注销)和授权。数据库文件环境变量我们已经需要并配置了dotenv。 require ( 'dotenv' ) . config ( ) 在项目的根目录中创建一个.env文件。 在新行...
14.10 用JavaScript实现数组排序 14.11 数字千分位函数 14.12 读写Cookie的函数 14.13 获取JavaScript函数中的所有参数 14.14 奇偶数的判断 14.15 在JavaScript运行VBScript函数 14.16 购物篮中常用的计算总价效果 ...
第1章 页面特效 ...1.2 页面自动最大化 1.3 页面自动刷新 1.4 页面的后退、刷新、前进 1.5保护网页源代码 ...22.15 用prototype实现JavaScript的继承 22.16 JavaScript制作哈希表 第23章 其他技巧及特效 23.1 ...
四、创建两个页面,一个是用户登录页面,另一个是欢迎页面,使用cookie保存用户名 和密码,有效期是一个月。 ----------------------- javascript程序设计练习题全文共2页,当前为第1页。 javascript程序设计练习题...
为了简化登录并限制我们保存在服务器上的数据,我们实施了“无密码”登录。 优点是用户仅需要通过自己的电子邮件地址进行身份验证。 登录期间,将向用户发送一个一次性使用的URL,该URL将把他们登录到系统中。 在...
实现了 清楚internet临时文件、Cookie的清除、游览器地址栏历史地址的清除、清楚表单自动完成历史记录、清楚自动密码历史记录、清除收藏夹中的内容、清除RAS自动拨号历史记录、清除系统临时文件夹、清空回收站、清除...
实现了 清楚internet临时文件、Cookie的清除、游览器地址栏历史地址的清除、清楚表单自动完成历史记录、清楚自动密码历史记录、清除收藏夹中的内容、清除RAS自动拨号历史记录、清除系统临时文件夹、清空回收站、清除...
实现了 清楚internet临时文件、Cookie的清除、游览器地址栏历史地址的清除、清楚表单自动完成历史记录、清楚自动密码历史记录、清除收藏夹中的内容、清除RAS自动拨号历史记录、清除系统临时文件夹、清空回收站、清除...