JavaScript登录记住密码操作的简单代码分享-js教程-PHP中文网

首页

web前端

js教程

JavaScript登录记住密码操作的简单代码分享

黄舟

Mar 23, 2017 pm 02:32 PM

本文给大家分享一段简单的js代码实现用户登录记住密码操作，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧

废话不多说了，直接给大家贴代码了，具体代码如下所示：

<!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=&#39;submit&#39; value="登录">
</form>
<script>
  window.onload = function(){
    var oForm = document.getElementById(&#39;loginForm&#39;);
    var oUser = document.getElementById(&#39;user&#39;);
    var oPswd = document.getElementById(&#39;pswd&#39;);
    var oRemember = document.getElementById(&#39;remember&#39;);
    //页面初始化时，如果帐号密码cookie存在则填充
    if(getCookie(&#39;user&#39;) && getCookie(&#39;pswd&#39;)){
      oUser.value = getCookie(&#39;user&#39;);
      oPswd.value = getCookie(&#39;pswd&#39;);
      oRemember.checked = true;
    }
    //复选框勾选状态发生改变时，如果未勾选则清除cookie
    oRemember.onchange = function(){
      if(!this.checked){
        delCookie(&#39;user&#39;);
        delCookie(&#39;pswd&#39;);
      }
    };
    //表单提交事件触发时，如果复选框是勾选状态则保存cookie
    oForm.onsubmit = function(){
      if(remember.checked){ 
        setCookie(&#39;user&#39;,oUser.value,7); //保存帐号到cookie，有效期7天
        setCookie(&#39;pswd&#39;,oPswd.value,7); //保存密码到cookie，有效期7天
      }
    };
  };
  //设置cookie
  function setCookie(name,value,day){
    var date = new Date();
    date.setDate(date.getDate() + day);
    document.cookie = name + &#39;=&#39; + value + &#39;;expires=&#39;+ date;
  };
  //获取cookie
  function getCookie(name){
    var reg = RegExp(name+&#39;=([^;]+)&#39;);
    var arr = document.cookie.match(reg);
    if(arr){
      return arr[1];
    }else{
      return &#39;&#39;;
    }
  };
  //删除cookie
  function delCookie(name){
    setCookie(name,null,-1);
  };
</script>
</body>
</html>

登录后复制

以上是JavaScript登录记住密码操作的简单代码分享的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7323

Java教程

1625

CakePHP 教程

1350

Laravel 教程

1262

PHP教程

1209

显示更多

Related knowledge

wallpaperengine登录别的号后下载别人的壁纸怎么办 Mar 19, 2024 pm 02:00 PM

当你在自己电脑上登过别人steam账号之后，恰巧这个别人的账号也有wallpaper软件，切换回自己账号之后steam就会自动下载别人账号订阅的壁纸，用户可以通过关闭steam云同步解决。wallpaperengine登录别的号后下载别人的壁纸怎么办1、登陆你自己的steam账号，在设置里面找到云同步，关闭steam云同步。2、登陆你之前登陆的别人的steam账号，打开wallpaper创意工坊，找到订阅内容，然后取消全部订阅。（以后防止找不到壁纸，可以先收藏再取消订阅）3、切换回自己的stea

小红书怎么登录以前的账号？它换绑后原来号丢失了怎么办？ Mar 21, 2024 pm 09:41 PM

随着社交媒体的迅速发展，小红书已经成为许多年轻人分享生活、探索新产品的热门平台。在使用过程中，有时用户可能会遇到登录以前账号的困难。本文将详细探讨如何解决小红书登录旧账号的问题，以及如何应对更换绑定后可能遗失原账号的情况。一、小红书怎么登录以前的账号？1.找回密码登录如果长时间未登录小红书，可能导致账号被系统回收。为了恢复访问权限，你可以尝试通过找回密码的方式重新登录账号。操作步骤如下：（1）打开小红书App或官网，点击“登录”按钮。（2）选择“找回密码”。（3）输入你注册账号时所使用的手机号码

Discuz后台登录问题解决方法大揭秘 Mar 03, 2024 am 08:57 AM

Discuz后台登录问题解决方法大揭秘，需要具体代码示例随着互联网的快速发展，网站建设变得越来越普遍，而Discuz作为一款常用的论坛建站系统，受到了许多站长的青睐。然而，正是因为其功能强大，有时候我们在使用Discuz的过程中会遇到一些问题，比如后台登录问题。今天，我们就来大揭秘Discuz后台登录问题的解决方法，并且提供具体的代码示例，希望能帮助到有需要

《阴阳师》茨木童子典藏皮肤登录即领，禅心云外镜新皮肤即将上线！ Jan 05, 2024 am 10:42 AM

山野间万鬼嘶鸣，隐没兵刃交接之声，越岭奔赴而来的鬼将，心中战意汹涌，以炎火为号，率百鬼冲锋迎战。【炽焱百炼•茨木童子典藏皮肤上线】鬼角炽焰怒燃，鎏金眼眸迸发桀骜战意，白玉甲片装点战袍，彰显大妖不羁狂放的气势。雪白飘扬的袖摆上，赤焰攀附交织，金纹烙印其中，燃点一片绯艳妖异色彩。妖力凝聚而成的鬼火咆哮而至，烈焰令群峦为之震动，炼狱间归来的妖鬼啊，一同惩戒进犯之人吧。【专属动态头像框•炽焱百炼】【专属插画•焰火将魂】【传记鉴赏】【获取方式】茨木童子典藏皮肤·炽焱百炼将于12月28日维护后上架皮肤商店，

快手电脑版怎么登录-快手电脑版的登录方法 Mar 04, 2024 pm 03:30 PM

近日有一些小伙伴咨询小编快手电脑版怎么登录?下面就为大家带来了快手电脑版的登录方法，有需要的小伙伴可以来了解了解哦。第一步：首先在电脑的浏览器上百度搜索快手官网。第二步：在搜索结果列表里面选取第一条。第三步：进入到快手官网主页面后，点击视频的选项。第四步：点击右上角的用户头像。第五步：在弹出的登录菜单里面点击二维码登录。第六步：之后打开手机上的快手，点击左上角的图标。第七步：点击二维码标志。第八步：在我的二维码界面点击右上角的扫描图标之后，扫描电脑上的二维码即可。第九步：最后电脑版的快手就登录成

夸克怎么登录两个设备 Feb 23, 2024 pm 10:55 PM

夸克怎么登录两个设备?夸克浏览器是支持同时登陆两个设备的，但是多数的小伙伴不知道夸克浏览器如何登陆两个设备，接下来就是小编为用户带来的夸克登陆两个设备方法图文教程，感兴趣的用户快来一起看看吧！夸克浏览器使用教程夸克怎么登录两个设备1、首先打开夸克浏览器APP，主页面点击【夸克网盘】;2、接着进入到夸克网盘界面，选择【我的备份】服务功能;3、最后选择其中的【切换设备】即可更换新设备登陆两个。

小红书只记得账号怎么登录？只记得账号怎么找回？ Mar 23, 2024 pm 05:31 PM

小红书如今已经融入了许多人的日常生活，其丰富的内容和便捷的操作方式让用户乐此不疲。有时候，我们可能会忘记账号密码，只记得账号而无法登录确实让人感到困扰。一、小红书只记得账号怎么登录？当忘记密码时，我们可以通过手机验证码的方式登录小红书。具体操作如下：1.打开小红书App或网页版小红书；2.点击“登录”按钮，选择“账号密码登录”；3.点击“忘记密码？”按钮；4.输入你的账号，点击“下一步”；5.系统会发送验证码到你的手机，输入验证码后点击“确定”；6.设置新的密码并确认。你还可以通过第三方账号（如

115网盘网页版登录入口 Feb 23, 2024 pm 02:04 PM

115网盘是个能够存放很多资源的网盘，那么115网盘网页版登录入口是什么呢?用户们需要输入https://115.com这个网址就能够进入网盘，登录后就能使用。这篇115网盘网页版登录最新入口分享能够告诉大家具体该怎么使用这个功能，赶紧看看吧。115网盘网页版登录入口网站分享：https://115.com具体介绍：1、首先需要选择一个方式来登录网盘。2、在右上角能够看到上传的文件。3、可以在这里新建文件夹，切换不同模式。4、可以在文件里添加不同的标签。5、在网站上面能够看到用户们的私信。

See all articles

JavaScript登录记住密码操作的简单代码分享

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题