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 YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
JavaScript 闭包深入理解(closure)
May 27 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
Jquery插件编写简明教程
Mar 25 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
Javascript函数式编程语言
Oct 11 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
May 16 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
Vue 监听列表item渲染事件方法
Sep 06 Javascript
js for终止循环 跳出多层循环
Oct 04 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 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作的文本留言本的例子(一)
2006/10/09 PHP
php 获取一个月第一天与最后一天的代码
2010/05/16 PHP
关于PHP定时发送服务的解决办法
2017/04/23 PHP
Javascript 面试题随笔
2011/03/31 Javascript
JavaScript 数组详解
2013/10/10 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
js加入收藏夹代码(兼容ie/ff/op)
2014/05/16 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
BootStrap智能表单实战系列(七)验证的支持
2016/06/13 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
jquery.cookie.js的介绍与使用方法
2017/02/09 Javascript
20行JS代码实现粘贴板复制功能
2018/02/06 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
javascript canvas API内容整理
2020/02/16 Javascript
10分钟学会js处理json的常用方法
2020/12/06 Javascript
[02:08]DOTA2英雄基础教程 马格纳斯
2014/01/17 DOTA
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
Python创建普通菜单示例【基于win32ui模块】
2018/05/09 Python
python对象与json相互转换的方法
2019/05/07 Python
python带参数打包exe及调用方式
2019/12/21 Python
html5教程制作简单画板代码分享
2013/12/04 HTML / CSS
mui几种页面跳转方式对比总结概括
2017/08/18 HTML / CSS
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
Vivo俄罗斯官方在线商店:中国智能手机品牌
2019/10/04 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
计算机专业毕业生推荐信
2013/11/25 职场文书
迎接领导欢迎词
2014/01/11 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
小学教育见习报告
2014/10/31 职场文书
考试作弊检讨书
2015/01/27 职场文书
优秀团员个人总结
2015/02/26 职场文书
销售开票员岗位职责
2015/04/15 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL