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 相关文章推荐
javascript之水平横向滚动歌词同步的应用
May 07 Javascript
Javascript变量作用域详解
Dec 06 Javascript
最短的IE判断var ie=!-[1,]分析
May 28 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
jQuery实现类似标签风格的导航菜单效果代码
Aug 25 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
mpvue开发音频类小程序踩坑和建议详解
Mar 12 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
google广告之另类js调用实现代码
Aug 22 Javascript
浅析JavaScript中的变量提升
Jun 01 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实现WEB动态网页静态
2006/10/09 PHP
PHP中Date()时间日期函数的使用方法小结
2011/04/20 PHP
如何使用PHP计算上一个月的今天
2013/05/23 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
jQuery 判断页面元素是否存在的代码
2009/08/14 Javascript
js弹出窗口之弹出层的小例子
2013/06/17 Javascript
JavaScript实现快速排序的方法
2015/07/31 Javascript
Bootstrap Table表格一直加载(load)不了数据的快速解决方法
2016/09/17 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
基于Bootstrap分页的实例讲解(必看篇)
2017/07/04 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
2018/12/10 jQuery
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
原生js+ajax分页组件
2020/01/30 Javascript
python编写爬虫小程序
2015/05/14 Python
使用python调用zxing库生成二维码图片详解
2017/01/10 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
Django自定义manage命令实例代码
2018/02/11 Python
基于windows下pip安装python模块时报错总结
2018/06/12 Python
python使用PyQt5的简单方法
2019/02/27 Python
python函数修饰符@的使用方法解析
2019/09/02 Python
python做接口测试的必要性
2019/11/20 Python
Python字节单位转换实例
2019/12/05 Python
Python中itertools的用法详解
2020/02/07 Python
Django之choices选项和富文本编辑器的使用详解
2020/04/01 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
介绍Java的内部类
2012/10/27 面试题
个人综合鉴定材料
2014/05/23 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
做一个有道德的人活动实施方案
2014/08/23 职场文书
中国梦演讲稿范文
2014/08/28 职场文书
MySQL下载安装配置详细教程 附下载资源
2022/09/23 MySQL