jQuery 网站记住用户名和密码（但是不建议保存密码到本地不安全）

最新推荐文章于 2024-07-31 16:11:49 发布

码奴生来只知道前进~

最新推荐文章于 2024-07-31 16:11:49 发布

阅读量659

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/tanqingfu1/article/details/105435666

版权

jQuery 专栏收录该内容

52 篇文章 3 订阅

订阅专栏

记住密码是每个有帐号登录的网站必备的，但是有时候还是不安全的。

1、localStorage实现保存密码用户名

localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。localStorage 属性是只读的。

localStorage.setItem("name", name);
localStorage.setItem("password", password);

2、sessionStorage 实现保存密码用户名

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

提示: 如果你想在浏览器窗口关闭后还保留数据，可以使用 localStorage 属性，该数据对象没有过期时间，今天、下周、明年都能用，除非你手动去删除。

sessionStorage.setItem("name", name);
sessionStorage.setItem("password", password);

3、实际的demo

<!doctype html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>记住用户密码</title>
<link href="layui/css/layui.css" rel="stylesheet" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.js"></script>

</head>

<body>

<div class="layui-main">

		<div class="layui-form-item">
			<label class="layui-form-label">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用户名</label>
				<div class="layui-inline">
					<input id="name">
				</div>
		</div>
		<label class="layui-form-label">密码</label>
		<div class="layui-inline">
			<input id="password" type="password">
		</div>	
		<br>
		<div  style="margin-top: 10px;"><input type="checkbox" οnclick="check()" id="check1"/>记住密码</div>
				
		<div class="layui-form-item">
			<label class="layui-form-label"></label>
				<div class="layui-input-inline">
					<button type="button" class="layui-btn " onclick="get()">提交</button>
				</div>
		</div>

</div>

<script type="text/javascript">
$(document).ready(function(){
	//页面加载完 获取是否选中记住密码
	var ck = localStorage.getItem("ck");
	if(ck){
		var name = localStorage.getItem("name");
		var password = localStorage.getItem("password");
		$("#name").val(name);
		$("#password").val(password);
		$("#check1").prop("checked",true);
		//document.getElementById("check1").checked = true;
	}
})
 function get(){
 //获取是否选中记住密码
 var ck = document.getElementById("check1").checked;
 //获取输入的用户名
 var name = $("#name").val();
 //获取输入的密码
 var password = $("#password").val();
 if(ck){
	localStorage.setItem("name", name);
	localStorage.setItem("password", password);
	
	sessionStorage.setItem("name", name);
	sessionStorage.setItem("password", password);
	
	//$.cookie('name1', name, { expires: 7 });
	//$.cookie('password1', password, { expires: 7 });
	//保存是否记住密码状态
	localStorage.setItem("ck", ck);
 }
 }	
 function check(){
  
 }
 
</script>

</body>
</html>