JavaScript登录记住密码操作(超简单代码)

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

<!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登录记住密码操作(超简单代码)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • js读写COOKIE实现记住帐号或密码的代码(js读写COOKIE)

    js COOKIE 记住帐号或密码 function onLoginLoaded() { if(isPostBack == "False") { GetLastUser(); } } function GetLastUser() { var id = "49BAC005-7D5B-4231-8CEA-16939BEACD67"; var usr = GetCookie(id); if(usr != null) { document.getElementById('t

  • JS实现登录页面记住密码和enter键登录方法推荐

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>按enter键触发事件和记住账号密码</title> <script> //方法一: // document.onkeypress=function(e){ // var keycode=document.all?event.keyCode:e.which; // if(keycode

  • JavaScript使用cookie实现记住账号密码功能

    很多登录功能上都有个"记住密码"的功能,其实无非就是对cookie的读取. 下面展示这个功能的代码,原作者已无法考究.... 测试方法:直接输入账号密码,提交后,刷新页面,再输入同样的账号,就可以显示 <!DOCTYPE HTML> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>

  • javascript记住用户名和登录密码（两种方式）

    下面主要通过代码给大家展示下javascript记住用户名和登录密码,具体代码内容请看下文. 第一种方式: CONTENT     login.html     welcome.html     cookie.js     common.js login.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-t

  • jquery.cookie.js 操作cookie实现记住密码功能的实现代码

    复制代码 代码如下: //初始化页面时验证是否记住了密码 $(document).ready(function() { if ($.cookie("rmbUser") == "true") { $("#rmbUser").attr("checked", true); $("#user").val($.cookie("userName")); $("#pass").va

  • js中利用cookie实现记住密码功能

    在登录界面添加记住密码功能,我首先想到的是在java后台中调用cookie存放账号密码,大致如下: HttpServletRequest request HttpServletResponse response Cookie username = new Cookie("username ","cookievalue"); Cookie password = new Cookie("password ","cookievalue&quo

  • JavaScript登录记住密码操作(超简单代码)

    废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>记住密码</title> </head> <bo

  • Android Walker登录记住密码页面功能实现

    Android Walker登录记住密码页面功能实现

    本文实例为大家分享了Android Walker登录记住密码页面的具体代码,供大家参考,具体内容如下 目标效果: 这一次修改的不多,添加了点击用户登录的跳转,登录页面的记住密码,和程序运行一次后,不进入导航页面的功能. 1.MainActivity.java页面修改了setOnItemClickListener的点击事件,进行跳转. MainActivity.java页面: package com.example.login; import java.util.ArrayList; import

  • thinkphp跨库操作的简单代码实例

    实例一:配置config.php文件配置多个数据库配置 'DB_CONFIG2' => 'mysql://root:1234@localhost:3306/thinkphp', 控制器中调用方法: $New = M('表名','前缀没前缀不填写','DB_CONFIG2'); 这里相当于从新连接了数据库远程跨库如果是在同一个服务器数据库可以直接切换: $User = M('数据库名.表名','前缀没有可不填'); 实例二:Model模型中的跨库以下代码填写到模型类中 protected $con

  • JAVA记住密码功能的实现代码

    JAVA记住密码功能的实现代码

    准备:SSM框架,mysql数据库 用户表 user 实体类: public class User { /** * 主键id */ private Integer userId; /** * 账号 */ private String username; /** * 密码 */ private String password; public Integer getUserId() { return userId; } public void setUserId(Integer userId) {

  • Vue+element+cookie记住密码功能的简单实现方法

    实现功能: 1.登录时勾选记住密码,用cookie保存账号和密码并对密码进行两次加密处理(纯前端),下次登录自动输入账号密码 2.登录时不勾选,清空cookie,下次登录需要输入 效果图: ===========================================================================================================================================================

  • vue实现禁止浏览器记住密码功能的示例代码

    查找资料 网上查到的一些方法: 使用 autocomplete="off"(现代浏览器许多都不支持) 使用 autocomplete="new-password" 在真正的账号密码框之前增加相同 name 的 input 框 使用 readonly 属性,在聚焦时移除该属性 初始化 input 框的 type 属性为 text,聚焦时修改为 password 使用 type="text",手动替换文本框内容为星号 "*" 或者

  • PHP 登录记住密码实现思路

    form页面 复制代码 代码如下: <form action="login.php" method="post"> 用户名<input type="text" name="username"><br> 密码<input type="text" name="password"><br> 记住密码<input type=&qu

  • Android实现用户登录记住密码功能

    Android实现用户登录记住密码功能

    一.打开之前完成的Case_login进行修改再编辑 二.将注册按钮删除并在登录按钮前拖出一个checkBox,编辑代码如下: 在layout_top.xml文件中进行编辑 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_

  • asp.net中使用cookie与md5加密实现记住密码功能的实现代码

    在做一个前台的登陆和后台的信息审核管理功能时,需要用到记住密码的模块:虽然.net内置了登陆控件,有记住密码的功能,但还是想自己实践一下,以下代码主要应用了COOKIE,包括安全加密的过程等. 复制代码 代码如下: //设置,删除Cookie//provider jb51.net        protected void set_cookie()        {            HttpCookie UserNameCookie = Request.Cookies["UserNameC

随机推荐