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

Dear 丶 2022-02-14 09:34 520阅读 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 条评论，520人围观）

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

相关阅读

相关登录时账户密码记住密码cookie

<body> 账号：<input type="text" /><br /> 密码：<input type="password" /><br ...

约定不等于承诺〃/ 2024年04月19日 12:09/ 0 赞/ 80 阅读

相关 JS实现记住用户密码

JS实现记住用户密码有趣的小案例池子： [JS实现定时器 ][JS_] [JS实现关闭图片窗口 ][JS_ 1] [JS实现输入检验 ][JS_ 2]

向右看齐/ 2024年03月31日 15:42/ 0 赞/ 84 阅读

相关 Vue中使用js-cookie插件实现登录时记住密码后存取到Cookie中

场景使用vue实现一个登录页面时，实现记住密码功能。在勾选了记住密码后将密码存储到Cookie中，然后下次直接从Cookie中取。 ![watermark_typ

╰半夏微凉°/ 2023年10月05日 09:26/ 0 赞/ 59 阅读

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6X2Nv

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

相关 js实现cookie记住密码

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

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

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

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

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

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

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

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

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

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

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

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