"这篇资源是关于使用JavaScript实现读取cookie以实现‘记住账号密码’功能的代码示例。" 在Web开发中,特别是在构建登录功能时,常常会遇到“记住账号密码”这一需求。该功能的实现主要依赖于浏览器的cookie机制。Cookie是一种小型数据文本,由服务器设置并在客户端浏览器存储,可用于保存用户的会话信息,如登录状态、用户名等。当用户勾选了“记住密码”选项,系统会将账号和密码信息以cookie的形式存储在用户的浏览器中。 以下代码展示了如何使用JavaScript读取并设置cookie来实现“记住账号密码”的功能: 1. 获取cookie 使用`GetCookie()`函数可以读取指定名称的cookie。在本例中,cookie的名称是一个GUID(全局唯一标识符):`var id="49BAC005-7D5B-4231-8CEA-16939BEACD67";`。函数通过`document.cookie`获取所有cookie,并根据名称分割获取特定cookie的值。 ```javascript function GetCookie(id) { var cookieArr = document.cookie.split(";"); for (var i = 0; i < cookieArr.length; i++) { var cookiePair = cookieArr[i].split("="); /* Removing whitespace at the beginning of the cookie name and compare it with the given string */ if (id == cookiePair[0].trim()) { // Decode the cookie value and return return decodeURIComponent(cookiePair[1]); } } // Return null if the cookie wasn't found return null; } ``` 2. 设置cookie 当用户登录并勾选“记住密码”选项时,使用`SetLastUser()`函数将用户名写入cookie。这个函数将设置一个带有特定过期时间的cookie。例如,下面的代码设置了14天的有效期: ```javascript function SetLastUser(usr) { var expdate = new Date(); expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000)); // 14 days in milliseconds document.cookie = id + "=" + encodeURIComponent(usr) + "; expires=" + expdate.toUTCString(); } ``` 3. 页面加载时自动填充账号 当页面加载时,`window.onload`事件触发`GetLastUser()`函数,检查是否存在存储的cookie。如果找到,它会将cookie中的用户名填充到输入框`txtUserName`中。如果没有找到,会默认填充为“001”。 4. 客户端事件处理 在用户点击登录按钮时,`SetPwdAndChk()`函数会被触发。它首先获取当前输入的用户名,然后检查“记住密码”复选框`chkRememberPwd`是否被选中。如果选中,它会获取密码值并调用`SetLastUser()`函数将密码写入cookie。 以上代码示例提供了一个基础的JavaScript实现,用于在Web应用中实现“记住账号密码”的功能。实际应用中,考虑到安全性,通常还需要对存储在cookie中的数据进行加密处理,防止数据被恶意获取。此外,对于现代Web应用,更推荐使用更安全的本地存储(localStorage或sessionStorage)替代cookie,因为它们提供了更大的存储容量且不会被发送到服务器,从而减少了隐私泄露的风险。
很多登录功能上都有个“记住密码”的功能,其实无非就是对cookie的读取。
下面展示这个功能的代码,原作者已无法考究。。。。
测试方法:直接输入账号密码,提交后,刷新页面,再输入同样的账号,就可以显示
<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js COOKIE 记住帐号或密码</title>
<script type="text/javascript">
window.onload=function onLoginLoaded() {
if (isPostBack == "False") {
GetLastUser();
}
}
function GetLastUser() {
var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";//GUID标识符
var usr = GetCookie(id);
if (usr != null) {
document.getElementById('txtUserName').value = usr;
} else {
document.getElementById('txtUserName').value = "001";
}
GetPwdAndChk();
}
//点击登录时触发客户端事件
function SetPwdAndChk() {
//取用户名
var usr = document.getElementById('txtUserName').value;
下载后可阅读完整内容,剩余4页未读,立即下载
- 粉丝: 0
- 资源: 5
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦