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 相关文章推荐
用jscript启动sqlserver
Jun 21 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
js中的referrer返回上一页使用介绍
Sep 26 Javascript
js实现精美的银灰色竖排折叠菜单
May 16 Javascript
jQuery实现美观的多级动画效果菜单代码
Sep 06 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
Angular2学习笔记——详解路由器模型(Router)
Dec 02 Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
vue项目上传Github预览的实现示例
Nov 06 Javascript
详解vue+axios给开发环境和生产环境配置不同的接口地址
Aug 16 Javascript
layer弹出框确定前验证:弹出消息框的方法(弹出两个layer)
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入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
对于PHP 5.4 你必须要知道的
2013/08/07 PHP
Laravel 4 初级教程之Pages、表单验证
2014/10/30 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
Javascript模板技术
2007/04/27 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
jquery选择器(常用选择器说明)
2010/09/28 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
2011/09/20 Javascript
运算符&amp;&amp;的三个不同层次
2013/04/07 Javascript
nodejs中实现sleep功能实例
2015/03/24 NodeJs
jQuery取消ajax请求的方法
2015/06/09 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
D3.js实现雷达图的方法详解
2016/09/22 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
详解vue-router2.0动态路由获取参数
2017/06/14 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
VUE接入腾讯验证码功能(滑块验证)备忘
2019/05/07 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
javascript实现拼图游戏
2021/01/29 Javascript
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
python将txt文件读取为字典的示例
2018/12/22 Python
Django框架模型简单介绍与使用分析
2019/07/18 Python
简单了解Django应用app及分布式路由
2019/07/24 Python
PyQt5高级界面控件之QTableWidget的具体使用方法
2020/02/23 Python
举例详解CSS3中的Transition
2015/07/15 HTML / CSS
《夸父追日》教学反思
2014/02/26 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
工商行政管理专业求职书
2014/05/23 职场文书
工会积极分子个人总结
2015/03/03 职场文书
2015年大学生实习评语
2015/03/25 职场文书
python爬取新闻门户网站的示例
2021/04/25 Python
MySQL 全文索引使用指南
2021/05/25 MySQL