localStorage实现记住密码功能

最新推荐文章于 2024-05-09 19:19:38 发布

weixin_42026831

最新推荐文章于 2024-05-09 19:19:38 发布

阅读量1.2k

点赞数

分类专栏：练习单独案例

本文链接：https://blog.csdn.net/weixin_42026831/article/details/80030657

版权

练习单独案例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>localStorage实现记住密码功能</title>
</head>
<body>
<table>
 <tr>
    <td>用户名：</td>
    <td>
   <input type="text" list="mylist" id="text1">
   <datalist id="mylist"></datalist>
    </td>
 </tr>
 <tr>
    <td>密码：</td>
    <td>
    <input type="password" id="pwd">
    </td>
 </tr>
 <tr>
    <td></td>
    <td><input type="checkbox" id="ck1">  
    <input type="button" id="btn" value="保存"> 
    </td>
 </tr>
</table>
<script>
//获取页面中需要操作的元素
var text1=document.getElementById("text1");
var mylist=document.getElementById("mylist");
var pwd=document.getElementById("pwd");
var ck1=document.getElementById("ck1");
var btn=document.getElementById("btn");
//为button按钮绑定click事件
btn.οnclick=function(){
	//获取两个文本框中的value值
	 var valuet=text1.value;
	 var valuep=pwd.value;
	//判断复选框是否被选中和两个value值是否为空
	if(ck1.checked&&valuet!=""&&valuep!=""){
	//保存
	 localStorage.setItem(valuet,valuep);
	}
	else{
	//清空密码框
	    pwd.value="";
	}
	//获取已经存储数据的个数
	var nums=localStorage.length;
	//遍历
for(var i=0;i<nums;i++){
		// 根据索引值得到key
			var key = localStorage.key(i);
	   //  根据key得到value
			var value = localStorage.getItem(key);
      //将以存储的用户名分别插入到用户名文本框的datalist下
	        mylist.innerHTML+="<option>"+key+"</option>";
	        
	}
}
//通过onchange事件判断用户名文本框的值是否被存储，如果已被存储，读取它对应的密码
text1.οnchange=function(){
	 var valuet=text1.value;
	 pwd.value="";
	if(localStorage.getItem(valuet)){
		pwd.value=localStorage.getItem(valuet);
	}
}
</script>
</body>
</html>

weixin_42026831

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
localStorage实现记住密码功能

&lt;!doctype html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;localStorage实现记住密码功能&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;table&gt; &lt
复制链接

扫一扫