<!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.onclick=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.onchange=function(){
var valuet=text1.value;
pwd.value="";
if(localStorage.getItem(valuet)){
pwd.value=localStorage.getItem(valuet);
}
}
</script>
</body>
</html>
localStorage实现记住密码功能
猜你喜欢
转载自blog.csdn.net/weixin_42026831/article/details/80030657
今日推荐
周排行