<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>localStorage implements remember password function</title>
</head>
<body>
<table>
<tr>
<td>Username:</td>
<td>
<input type="text" list="mylist" id="text1">
<datalist id="mylist"></datalist>
</td>
</tr>
<tr>
<td>Password:</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>
//Get the element in the page that needs to be manipulated
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");
//Bind the click event for the button button
btn.onclick=function(){
//Get the value of the two text boxes
var valuet=text1.value;
var valuep=pwd.value;
/ / Determine whether the checkbox is selected and whether the two value values are empty
if(ck1.checked&&valuet!=""&&valuep!=""){
//keep
localStorage.setItem(valuet,valuep);
}
else{
//Clear the password box
pwd.value="";
}
//Get the number of stored data
var nums=localStorage.length;
//traverse
for(var i=0;i<nums;i++){
// get the key according to the index value
var key = localStorage.key (i);
// get value according to key
var value = localStorage.getItem(key);
//Insert the stored username into the datalist of the username text box respectively
mylist.innerHTML+="<option>"+key+"</option>";
}
}
/ / Determine whether the value of the user name text box is stored through the onchange event, if it has been stored, read its corresponding password
text1.onchange=function(){
var valuet=text1.value;
pwd.value="";
if(localStorage.getItem(valuet)){
pwd.value=localStorage.getItem(valuet);
}
}
</script>
</body>
</html>
localStorage implements the function of remembering passwords
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=325351012&siteId=291194637
Ranking