JavaScript登录记住密码操作(超简单代码)


Posted in Javascript onMarch 22, 2017

废话不多说了,直接给大家贴代码了,具体代码如下所示:

<!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登录记住密码操作(超简单代码),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
onsubmit阻止form表单提交与onclick的相关操作
Sep 03 Javascript
Javascript中call的两种用法实例
Dec 13 Javascript
基于javascript的COOkie的操作实现只能点一次
Dec 26 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
Webpack之tree-starking 解析
Sep 11 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
详解vue 数组和对象渲染问题
Sep 21 Javascript
原生JS京东轮播图代码
Mar 22 #Javascript
10道典型的JavaScript面试题
Mar 22 #Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
Mar 22 #jQuery
js弹出窗口简单实现代码
Mar 22 #Javascript
js实现自动图片轮播代码
Mar 22 #Javascript
JavaScript中清空数组的三种方式
Mar 22 #Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 #Javascript
You might like
php数组函数序列之each() - 获取数组当前内部指针所指向元素的键名和键值,并将指针移到下一位
2011/10/31 PHP
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
基于php上传图片重命名的6种解决方法的详细介绍
2013/04/28 PHP
PHP和Shell实现检查SAMBA与NFS Server是否存在
2015/01/07 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
Javascript 中的类和闭包
2010/01/08 Javascript
鼠标滑在标题上显示图片的JS代码
2013/11/19 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
Bootstrap嵌入jqGrid,使你的table牛逼起来
2016/05/05 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
js编写选项卡效果
2017/05/23 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
vue自定义指令directive的使用方法
2019/04/07 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
vue在App.vue文件中监听路由变化刷新页面操作
2020/08/14 Javascript
[01:31:22]DOTA2-DPC中国联赛定级赛 LBZS vs Magma BO3第二场 1月10日
2021/03/11 DOTA
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
python将字符串转换成json的方法小结
2019/07/09 Python
Python切图九宫格的实现方法
2019/10/10 Python
Python求平面内点到直线距离的实现
2020/01/19 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
html5 拖拽上传图片实例演示
2013/04/01 HTML / CSS
美国床垫和床上用品公司:Nest Bedding
2017/06/12 全球购物
BNKR中国官网:带你感受澳洲领先潮流时尚
2018/08/21 全球购物
大学生活自我评价
2014/04/09 职场文书
销售口号大全
2014/06/11 职场文书
禁止酒驾标语
2014/06/25 职场文书
护士求职信
2014/07/05 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
css3手动实现pc端横向滚动
2022/06/21 HTML / CSS