JavaScript登录记住密码操作(超简单代码)
更新时间：2017年03月22日 15:51:33 作者：lihefei_coder
本文给大家分享一段简单的js代码实现用户登录记住密码操作，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
废话不多说了，直接给大家贴代码了，具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>记住密码</title>
</head>
<body>
<form id="loginForm">
<input id="user" type="text" placeholder="用户名"><br>
<input id="pswd" type="password" placeholder="密码"><br>
<label><input id="remember" type="checkbox">记住密码</label><br>
<input type='submit' value="登录">
</form>
<script>
window.onload = function(){
var oForm = document.getElementById('loginForm');
var oUser = document.getElementById('user');
var oPswd = document.getElementById('pswd');
var oRemember = document.getElementById('remember');
//页面初始化时，如果帐号密码cookie存在则填充
if(getCookie('user') && getCookie('pswd')){
oUser.value = getCookie('user');
oPswd.value = getCookie('pswd');
oRemember.checked = true;
}
//复选框勾选状态发生改变时，如果未勾选则清除cookie
oRemember.onchange = function(){
if(!this.checked){
delCookie('user');
delCookie('pswd');
}
};
//表单提交事件触发时，如果复选框是勾选状态则保存cookie
oForm.onsubmit = function(){
if(remember.checked){
setCookie('user',oUser.value,7); //保存帐号到cookie，有效期7天
setCookie('pswd',oPswd.value,7); //保存密码到cookie，有效期7天
}
};
};
//设置cookie
function setCookie(name,value,day){
var date = new Date();
date.setDate(date.getDate() + day);
document.cookie = name + '=' + value + ';expires='+ date;
};
//获取cookie
function getCookie(name){
var reg = RegExp(name+'=([^;]+)');
var arr = document.cookie.match(reg);
if(arr){
return arr[1];
}else{
return '';
}
};
//删除cookie
function delCookie(name){
setCookie(name,null,-1);
};
</script>
</body>
</html>
以上所述是小编给大家介绍的JavaScript登录记住密码操作(超简单代码)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要为大家详细介绍了Bootstrap页面标题Page Header的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
Hash Map通常在JavaScript中作为一个简单的来存储键值对的地方,不过哈希对象Object并不是一个真正的哈希映射,没Java中的Hash Map来的那么强大,well,接下来带大家详解JavaScript中Hash Map映射结构的实现2016-05-05
这篇文章主要介绍了Javascript原型链及instanceof原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了javascript常用函数,归纳整理了一些常用的函数便于大家查询参考,需要的朋友可以参考下2014-10-10
这篇文章主要为大家详细介绍了小程序实现带年月选取效果的日历，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-06-06
这篇文章主要介绍了JavaScript数组去重的3种方法和代码实例,本文直接给出实例代码,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了JavaScript三大变量声明详析,三大变量声明主要包括var、const和let，下面文章我们就围绕三者展开详细内容介绍，需要的朋友可以参考一下2022-06-06
为了兼容小程序Canvas,ECharts提供了一个小程序的组件,用这种方式可以方便地使用ECharts,下面这篇文章主要给大家介绍了关于uni-app微信小程序使用echarts的相关资料,需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了js自定义Tab选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
一步一步封装自己的HtmlHelper组件BootstrapHelper（三）
一步一步封装自己的HtmlHelper组件：BootstrapHelper，系列文章第三篇，感兴趣的小伙伴们可以参考一下2016-09-09
最新评论