JavaScript使用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;
alert(usr);
//将最后一个用户信息写入到Cookie
SetLastUser(usr);
//如果记住密码选项被选中
if (document.getElementById('chkRememberPwd').checked == true) {
//取密码值
var pwd = document.getElementById('txtPassword').value;
alert(pwd);
var expdate = new Date();
expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
//将用户名和密码写入到Cookie
SetCookie(usr, pwd, expdate);
} else {
//如果没有选中记住密码,则立即过期
ResetCookie();
}
}
function SetLastUser(usr) {
var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67";
var expdate = new Date();
//当前时间加上两周的时间
expdate.setTime(expdate.getTime() + 14 * (24 * 60 * 60 * 1000));
SetCookie(id, usr, expdate);
}
//用户名失去焦点时调用该方法
function GetPwdAndChk() {
var usr = document.getElementById('txtUserName').value;
var pwd = GetCookie(usr);
if (pwd != null) {
document.getElementById('chkRememberPwd').checked = true;
document.getElementById('txtPassword').value = pwd;
} else {
document.getElementById('chkRememberPwd').checked = false;
document.getElementById('txtPassword').value = "";
}
}
//取Cookie的值
function GetCookie(name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
//alert(j);
if (document.cookie.substring(i, j) == arg) return getCookieVal(j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}
var isPostBack = "<%= IsPostBack %>";
function getCookieVal(offset) {
var endstr = document.cookie.indexOf(";", offset);
if (endstr == -1) endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
//写入到Cookie
function SetCookie(name, value, expires) {
var argv = SetCookie.arguments;
//本例中length = 3
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape(value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : "");
}
function ResetCookie() {
var usr = document.getElementById('txtUserName').value;
var expdate = new Date();
SetCookie(usr, null, expdate);
}
</script>
</head>
<body>
<form id="form1">
<div> 用户名:
<input type="text" ID="txtUserName" onblur="GetPwdAndChk()">
<input type="password" ID="txtPassword">
密码：
<input type="checkbox" ID="chkRememberPwd" />
记住密码
<input type="button" OnClick="SetPwdAndChk()" value="进入"/>
</div>
</form>
</body>
</html>
相关推荐
-
JS中cookie的使用及缺点讲解
什么是Cookie Cookie意为"甜饼",是由W3C组织提出,最早由Netscape社区发展的一种机制.目前Cookie已经成为标准,所有的主流浏览器如IE.Netscape.Firefox.Opera等都支持Cookie. 由于HTTP是一种无状态的协议,服务器单从网络连接上无从知道客户身份.怎么办呢?就给客户端们颁发一个通行证吧,每人一个,无论谁访问都必须携带自己通行证.这样服务器就能从通行证上确认客户身份了.这就是Cookie的工作原理. Cookie实际上是一小段的文本信
-
javascript制作的cookie封装及使用指南
一.前言 之前使用cookie,都是document.cookie的形式去操作,兼容性虽好,但是麻烦.个人又是个比较喜欢造轮子的人,所以针对cookie,封装了个工具类.很长时间以来,我都喜欢写代码,而不太喜欢文字总结,也不太喜欢写些零碎的东西,看来得改. 二.思路 (1)如何封装,封装成啥样 如何封装:就是使用原生的js封装成工具,那样到哪里都能能用.针对document.cookie封装是最好的方式,所有的操作都基于document.cookie. 封装成啥样:封装成能够以对象的形式存在,同
-
JS使用cookie实现DIV提示框只显示一次的方法
本文实例讲述了JS使用cookie实现DIV提示框只显示一次的方法.分享给大家供大家参考,具体如下: 这里运用JavaScript的cookie技术,控制网页上的提示DIV只显示一次,也就是当用户是第一次打开网页的时候才显示,第二次自动隐藏起来,很好的提升了用户体验,不会使用户烦感:利用Cookies,我们还可做超多的事情,慢慢体会吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-cookie-div-dlg-show-once-cod
-
js简单设置与使用cookie的方法
本文实例讲述了js简单设置与使用cookie的方法.分享给大家供大家参考,具体如下: 一.js设置cookie的用处 php可以设置cookie的,用js来设置cookie有什么好处呢?在前端进行操作时,有的时候要传很多参数,这个时候,我们可以把这些参数拼接到url后面进行传值,那边在接收参数,不过这样挺麻烦的,如果把这些数据放到cookie里面,就开发者的开发效率来说,我想会高一些,以淘宝为例,他有一级分类,二级分类,三级,四级,我们找商品的时候,可能会牵扯到很多条件,如果把这些条件都放到co
-
jquery.cookie.js使用指南
jquery.cookie.js是一个轻量级的cookie插件,可以读取.写入.删除cookie. jquery.cookie.js的配置 首先包含jQuery的库文件,在后面包含jquery.cookie.js的库文件. 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.2.min.js"></script> <script type="text/jav
-
jsp使用cookie存储中文示例分享
看J2EE的时候,看见书上讲到使用cookie保存信息的时,看到书上举得例子都是英文的键值对,我就想中文是不是一样呢?试了一下果然不一样.废话不多说,直接上代码: 比如说有addCookie.jsp代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head> <title>增加cookie</title></head><body><
-
js使用cookie记录用户名的方法
本文实例讲述了js使用cookie记录用户名的方法.分享给大家供大家参考,具体如下: cookie思路:当点击登录按钮时,把cookie存起来,再次访问的时候就读取cookie,即把txt的value设置之前存起来cookie的值就行. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt
-
JavaScript使用cookie实现记住账号密码功能
很多登录功能上都有个"记住密码"的功能,其实无非就是对cookie的读取. 下面展示这个功能的代码,原作者已无法考究.... 测试方法:直接输入账号密码,提交后,刷新页面,再输入同样的账号,就可以显示 <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>
-
Vue实现登录记住账号密码功能的思路与过程
目录 实现思路 这里有三种方法来存储账号密码: 功能界面 记住账号密码功能的具体实现 密码加密 localStorage cookies 总结 实现思路 用户登录时若勾选"记住我"功能选项,则将登录名和密码(加密后)保存至本地缓存中,下次登录页面加载时自动获取保存好的账号和密码(需解密),回显到登录输入框中. 这里有三种方法来存储账号密码: 1. sessionStorage(不推荐) 1). 仅在当前会话下有效,关闭浏览器窗口后就被清除了 2). 存放数据大小一般为5MB 3). 不
-
Android制作登录页面并且记住账号密码功能的实现代码
一.页面搭建 <?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmln
-
Vue实现记住账号密码功能的操作过程
目录 实现思路: 记住账号密码实现流程 npm安装base64依赖 实现思路: 用户登录时若勾选“记住我”功能选项,则将登录名和密码(加密后)存入本地缓存,下次登录页面加载时自动获取保存好的账号和密码(需解密),回显到登录输入框中. 说到存入本地缓存,大家想到的一定是cookies.localStorage.sessionStorage,不过后者我是不推荐使用的,咱们既然需求是记住密码那肯定是长时间或到下次取消时失效,但sessionStorage仅在当前会话下有效,关闭浏览器窗口后就被清除了,
-
Android实现记住账号密码功能
本文实例为大家分享了Android实现记住账号密码的具体代码,供大家参考,具体内容如下 布局 一个复选框 <CheckBox android:id="@+id/checkbox" android:radius="5dp" android:text="记住我" android:layout_marginLeft="20dp" android:layout_width="wrap_content" and
-
Android中使用SharedPreferences完成记住账号密码的功能
效果图: 记住密码后,再次登录就会出现账号密码,否则没有. 分析: SharedPreferences可将数据存储到本地的配置文件中 SharedPreferences会记录CheckBox的状态,如果CheckBox被选,则将配置文件中记录的账号密码信息回馈给账号密码控件,否则清空. SharedPreferences使用方法: 1.创建名为config的配置文件,并且私有 private SharedPreferences config; config=getSharedPreference
-
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
本文实例讲述了Python实现在线暴力破解邮箱账号密码功能.分享给大家供大家参考,具体如下: dic 字典格式如下(mail.txt) : username@gmail.com:password username@gmail.com:password username@gmail.com:password 以此类推,切记保存成utf-8编码格式. 放置在当前脚本目录,也可自己定义修改. 支持ssl https /imap协议. # version 3.4.0 # coding='UTF-8' #
-
JQuery记住用户名密码实现下次自动登录功能
Jquery将用户名密码存储到cookie中 需要导入jquery.js和jquery.cookie.js <html> <head> <title>test cookie</title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script src="Scripts/
-
JavaScript中如何使用cookie实现记住密码功能及cookie相关函数介绍
cookie是网站设计者放置在客户端(浏览器)的小文本文件,cookie不仅能够实现保存密码功能,还可以通过cookie保存最近浏览记录增加用户体验. 在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"
-
js中利用cookie实现记住密码功能
在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"); Cookie password = new Cookie("password ","cookievalue&quo