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 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
Jun 11 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
json中换行符的处理方法示例介绍
Jun 10 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
提高jQuery性能优化的技巧
Aug 03 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
js注册时输入合法性验证方法
Oct 21 Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
JavaScript实现优先级队列
Dec 06 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
XAMPP安装与使用方法详细解析
2013/11/27 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
PHP下的浮点运算不准的解决方法
2016/10/27 PHP
PHP聊天室简单实现方法详解
2018/12/08 PHP
Thinkphp5 如何隐藏入口文件index.php(URL重写)
2019/10/16 PHP
PHP程序员必须知道的两种日志实例分析
2020/05/14 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
用Javascript 获取页面元素的位置的代码
2009/09/25 Javascript
JQuery的html(data)方法与&amp;lt;script&amp;gt;脚本块的解决方法
2010/03/09 Javascript
jQuery中:radio选择器用法实例
2015/01/03 Javascript
javascript正则表达式总结
2016/02/29 Javascript
Javascript中级语法快速入手
2016/07/30 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
vue2滚动条加载更多数据实现代码
2017/01/10 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
基于Vue实现电商SKU组合算法问题
2019/05/29 Javascript
JavaScript JSON使用原理及注意事项
2020/07/30 Javascript
原生JS实现相邻月份日历
2020/10/13 Javascript
python连接mysql并提交mysql事务示例
2014/03/05 Python
Python开发的实用计算器完整实例
2017/05/10 Python
python的格式化输出(format,%)实例详解
2018/06/01 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
Python小工具之消耗系统指定大小内存的方法
2018/12/03 Python
Python对象与引用的介绍
2019/01/24 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
python对象转字典的两种实现方式示例
2019/11/07 Python
Tensorflow训练模型越来越慢的2种解决方案
2020/02/07 Python
原装进口全世界:天猫国际
2016/08/03 全球购物
如何手工释放资源
2013/12/15 面试题
美容院考勤制度
2014/01/30 职场文书
委托培训协议书
2014/11/17 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
有关骆驼祥子的读书笔记
2015/06/26 职场文书
详解redis分布式锁的这些坑
2021/05/19 Redis