JS实现记住账号密码

实现的原理？
操作cookie，通过判断是否勾选了记住密码框，设置cookie内容，达到保存用户名和密码的效果。
什么时cookie？
cookie有4kb大小，超出长度会返回空字符串；
cookie存放在客户端，可以方便的修改查看，所以不能用cookie存放重要信息；
cooki生命周期会在关闭浏览器以后结束，如果要在一段事件内使用，我们可以为cookie设置有效时间；

Cookie，有时也用其复数形式 Cookies，指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据（通常经过加密）。定义于 RFC2109 和 2965 中的都已废弃，最新取代的规范是 RFC6265 [1] 。（可以叫做浏览器缓存）
——引用自百度百科

如何设置、读取、删除cookie？
session是运行在服务器端的，因此我们不能用js直接来设置它；但是cookie是运行在客户端的，我们可以使用js来操作。
cookie的结构：cookie是以键值对保存的，即key=value，它们以“；”进行分隔；
js设置cookie:例如用户名（“tom）的值要保存在cookie中，对应的js代码为document.cookie=“name=”+username;
js读取cookie：
假设cookie中存储的内容为：name=jack;password=123
则在B页面中获取变量username的值的JS代码如下：
var username=document.cookie.split(";")[0].split("=")[1];
js删除cookie：
document.cookie = “username=; expires=Thu, 01 Jan 1970 00:00:00 GMT”;
删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可

下面贴出代码：

<body>
	<div>
		用户名：<input type="text" id="username" value=""><br />
		密码：&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" id="password"><br />
		<input type="checkbox" id="rember" check="true">记住密码
		<button type="submit" id="dl">登陆</button>
	</div>
	<script>
	window.onload = function(){
		var name = document.getElementById("username");
		var pswd = document.getElementById("password");
		var dl = document.getElementById("dl");
		var orember = document.getElementById("rember");
//		var cuser = document.cookie = "user"+"="+name.value+";";
//		var cpswd = document.cookie = "password"+"="+pswd.value+";";
		//页面初始化时，如果帐号密码cookie存在则填充
		if(getCookie('username')&& getCookie('password')){
			name.value = getCookie('username');
			pswd.value = getCookie('password');
			orember.checked = true;
		}
		//复选框勾选状态发生改变时，如果未勾选则清除cookie
		orember.onchange = function(){
			if(!this.checked){
				delCookie('username');
				delCookie('password');
			}
			else{
				tips.style.display = "black";
			}
		}
		//表单提交事件触发时，如果复选框是勾选状态则保存cookie
		dl.onsubmit =function(){
			if(remember.checked){ 
				setCookie('username',name.value,7); //保存帐号到cookie，有效期7天
				setCookie('password',pswd.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>

JS实现记住账号密码

玩咖指针 2022-06-06 16:28:25