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 框架使用教程 AJAX篇
Oct 11 Javascript
JavaScript Accessor实现说明
Dec 06 Javascript
javascript闭包传参和事件的循环绑定示例探讨
Apr 17 Javascript
js上传图片及预览功能实例分析
Apr 24 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
Oct 10 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
js实现图片切换(动画版)
Dec 25 Javascript
Vue shopCart 组件开发详解
Jan 26 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
Vue中的作用域CSS和CSS模块的区别
Oct 09 Javascript
基于JS实现简单滑块拼图游戏
Oct 12 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 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
破解图片防盗链的代码(asp/php)测试通过
2010/07/02 PHP
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
PHP自定义大小验证码的方法详解
2013/06/07 PHP
浅析Dos下运行php.exe,出现没有找到php_mbstring.dll 错误的解决方法
2013/06/29 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
JavaScript语言精粹经典实例(整理篇)
2016/06/07 Javascript
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
ionic实现下拉刷新载入数据功能
2017/05/11 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
微信小程序如何使用云开发
2019/05/17 Javascript
策略模式实现 Vue 动态表单验证的方法
2019/09/16 Javascript
layui的select联动实现代码
2019/09/28 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
vue实现短信验证码输入框
2020/04/17 Javascript
ant design vue中表格指定格式渲染方式
2020/10/28 Javascript
Python for Informatics 第11章之正则表达式(二)
2016/04/21 Python
Python简单定义与使用字典dict的方法示例
2017/07/25 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
介绍一下Ruby的多线程处理
2013/02/01 面试题
大学自我鉴定范文
2013/12/26 职场文书
幼儿园义卖活动方案
2014/01/17 职场文书
微信营销策划方案
2014/02/24 职场文书
忠诚奉献演讲稿
2014/09/12 职场文书
个人整改措施落实情况汇报
2014/10/29 职场文书
致地震灾区的慰问信
2015/03/23 职场文书
Spring整合Mybatis的全过程
2021/06/28 Java/Android
SQL Server表分区降低运维和维护成本
2022/04/08 SQL Server