<!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
Recommended
Ranking