js如何实现登录时记住密码

Dear 丶 2022-02-14 09:34 507阅读 0赞

常见的很多网站登录，都有记住密码功能，下面是用js实现的记住密码功能（代码用的源生js，不用引入任何插件，大家如果引入了jQuery，可以进行修改，优化）

js部分

window.onload = function(){
    	var oForm = document.getElementById('myForm');
    	var oUser = document.getElementById('username');
    	var oPswd = document.getElementById('passwrod');
    	var oRemember = document.getElementById('remember');
    	//页面初始化时，如果帐号密码cookie存在则填充
    	if (getCookie('username') && getCookie('password')) {
    		oUser.value = getCookie('username');
    		oPswd.value = getCookie('password');
    		oRemember.checked = true;
    	}
    	//复选框勾选状态发生改变时，如果未勾选则清除cookie
    	oRemember.onchange = function() {
    		if (!this.checked) {
    			delCookie('username');
    			delCookie('password');
    		}
    	};
    	//表单提交事件触发时，如果复选框是勾选状态则保存cookie
    	oForm.onsubmit = function() {
    		if (remember.checked) {
    			setCookie('username', oUser.value, 7); //保存帐号到cookie，有效期7天
    			setCookie('password', 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);
    };

登录页面

<form id="myForm" action="login" method="post">
    	<input type="text" value="" class="inp" name = "username" id="username" />
    	<input type="password" value="" class="inp" name = "password" id="passwrod" />
    	
    	<input type="text" class="inp" id="yzm" placeholder="验证码" />
    	<img id="img" src="getCode" onclick="changeImg()">
    	
    	<div style="margin: 10px;">
    		<span><input type="checkbox" id="remember"><label for="remember">记住我</label></span>
    		<span style="float: right;">注册</span>
    	</div>
    	
    	<button type="button" class="inp" id="btn">立即登录</button>
    </for

注意js里边的id对应：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMjA1MTE2_size_16_color_FFFFFF_t_70]: /images/20220214/9a317d7d9a5d47d1ab7bdbd8cd78af53.png

发表评论取消回复

表情：

评论列表（有 0 条评论，507人围观）

还没有评论，来说两句吧...

相关阅读

相关 h5使用jq实现登录记住账号密码

<div> <div class="login"> <input type="text" placeholder

待我称王封你为后i/ 2022年12月22日 11:24/ 0 赞/ 219 阅读

相关 vue实现登录，记住密码功能（cookie）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2Nv

系统管理员/ 2022年09月03日 04:29/ 0 赞/ 280 阅读

相关 js实现cookie记住密码

近来做记住密码时，用js的实现方式做了一下。 login.jsp页面代码 <%@ page language="java" impor

逃离我推掉我的手/ 2022年08月06日 06:09/ 0 赞/ 231 阅读

相关登录时记住密码的实现

//判断是否有cookie的值 var staffCodeValue = me.getCookieValue('staff_code') ; va

太过爱你忘了你带给我的痛/ 2022年05月20日 01:53/ 0 赞/ 282 阅读

相关智能管家---10. 用户登录功能实现（记住密码）

接下来实现用户登录功能，图解简要过程如下： ![这里写图片描述][70] 用户登录功能和用户注册功能实现过程大同小异，都是点击按钮以后获取用户输入的值，判断是否为空，如果

一时失言乱红尘/ 2022年05月17日 06:06/ 0 赞/ 390 阅读

相关 uni-app登录+记住密码

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

男娘i/ 2022年03月16日 03:08/ 0 赞/ 540 阅读

相关 js如何实现登录时记住密码

常见的很多网站登录，都有记住密码功能，下面是用js实现的记住密码功能（代码用的源生js，不用引入任何插件，大家如果引入了jQuery，可以进行修改，优化） js部分

Dear 丶/ 2022年02月14日 09:34/ 0 赞/ 508 阅读

相关 Web 实现登录记住密码功能

HTML <form id="nameLoginForm"> 账户名：<input type="text" name="name" id="name"

谁践踏了优雅/ 2021年10月19日 01:24/ 0 赞/ 669 阅读

相关 Javascript登录页面“记住密码”实现

　　JS记住密码实现效果： JavaScript Code <table style="font-family:Consolas, 'Courier New';font

柔光的暖阳◎/ 2021年09月30日 10:20/ 0 赞/ 400 阅读

相关 Android系列之实现自动登录和记住密码

记住密码和自动登录是很多手机软件都有的一个功能。可以用 SharedPreferences类来轻松实现。 SharedPreferences是安卓平台的一个轻量级类。采用 Sh

r囧r小猫/ 2021年09月10日 16:46/ 0 赞/ 923 阅读