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 相关文章推荐
怎么让脚本或里面的函数在所有图片都载入完毕的时候执行
Oct 17 Javascript
javascript 密码强弱度检测万能插件
Feb 25 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
jquery操作ID带有变量的节点实例
Dec 07 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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操作Access类(PHP+ODBC+Access)
2007/01/02 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
php+html5基于websocket实现聊天室的方法
2015/07/17 PHP
PHP类型约束用法示例
2016/09/28 PHP
php mysql实现mysql_select_db选择数据库
2016/12/30 PHP
javascript eval和JSON之间的联系
2009/12/31 Javascript
jquery的Tooltip插件 qtip使用详细说明
2010/09/08 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
2012/12/12 Javascript
A标签触发onclick事件而不跳转的多种解决方法
2013/06/27 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
Javascript 函数的四种调用模式
2016/11/05 Javascript
详解windows下vue-cli及webpack 构建网站(三)使用组件
2017/06/17 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
[01:10:03]OG vs EG 2018国际邀请赛淘汰赛BO3 第三场 8.23
2018/08/24 DOTA
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
在Python中使用成员运算符的示例
2015/05/13 Python
wxPython绘图模块wxPyPlot实现数据可视化
2019/11/19 Python
Pandas 解决dataframe的一列进行向下顺移问题
2019/12/27 Python
解决python-docx打包之后找不到default.docx的问题
2020/02/13 Python
H5 meta小结(前端必看篇)
2016/08/24 HTML / CSS
加拿大著名时装品牌:SOIA & KYO
2016/08/23 全球购物
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
UNDONE手表官网:世界领先的定制手表品牌
2018/11/13 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
blueseventy官网:铁人三项和比赛泳衣
2021/02/06 全球购物
学前教育教师求职自荐信
2013/09/22 职场文书
旷课检讨书范文
2014/10/30 职场文书
期中考试后的感想
2015/08/07 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
Python django中如何使用restful框架
2021/06/23 Python
Go语言测试库testify使用学习
2022/07/23 Golang