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中最常用的55个经典小技巧
Nov 29 Javascript
jquery简单图片切换显示效果实现方法
Jan 14 Javascript
Jsonp post 跨域方案
Jul 06 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
jQuery tagsinput在h5邮件客户端中应用详解
Sep 26 Javascript
工作中常用的js、jquery自定义扩展函数代码片段汇总
Dec 22 Javascript
angularjs实现时间轴效果的示例代码
Nov 29 Javascript
JS严格模式知识点总结
Feb 27 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
Sep 25 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
微信小程序实现左侧滑动导航栏
Apr 08 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 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常用正则表达式的整理汇总
2013/06/08 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
利用a标签自动解析URL分析网址实例
2014/10/20 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
Bootstrap模态框禁用空白处点击关闭
2016/10/20 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
jQuery实现优雅的弹窗效果(6)
2017/02/08 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
2017/06/29 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
layui中layer前端组件实现图片显示功能的方法分析
2017/10/13 Javascript
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
JavaScript伪数组用法实例分析
2017/12/22 Javascript
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
解决Layui中layer报错的问题
2019/09/03 Javascript
使用nodeJS中的fs模块对文件及目录进行读写,删除,追加,等操作详解
2020/02/06 NodeJs
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
[01:11:15]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python实现的一个找零钱的小程序代码分享
2014/08/25 Python
python模拟登录并且保持cookie的方法详解
2017/04/04 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
Python从零开始创建区块链
2018/03/06 Python
python中嵌套函数的实操步骤
2019/02/27 Python
Python selenium模拟手动操作实现无人值守刷积分功能
2020/05/13 Python
如何用python处理excel表格
2020/06/09 Python
python 模拟登录B站的示例代码
2020/12/15 Python
历史学专业毕业生求职信
2013/09/27 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript