<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <fieldset id=""> <legend>客户信息管理网页</legend> <table border="1" cellspacing="1" cellpadding="0"> <tr> <td> 姓名 </td> <td> <input type="text" id="username"/> </td> </tr> <tr> <td> 邮箱 </td> <td> <input type="text" id="email"/> </td> </tr> <tr> <td> 电话 </td> <td> <input type="text" id="tel"/> </td> </tr> <tr> <td> 备注 </td> <td> <input type="text" id="info" /> </td> </tr> <tr> <td colspan="2"> <input type="button" name="" id="save" value="保存" /> </td> </tr> </table> <hr /> <label for="search">根据姓名检索信息：</label> <input type="text" name="" id="search" value="" /> <input type="button" name="" id="srhBtn" value="检索" /> <hr /> <div id="content"></div> </fieldset> </body> <script type="text/javascript"> document.getElementById("save").onclick=function(){ var uname = document.getElementById("username").value; var email = document.getElementById("email").value; var tel = document.getElementById("tel").value; var info = document.getElementById("info").value; var obj = { "username":uname, "email":email, "tel":tel, "info":info } localStorage.setItem(uname,JSON.stringify(obj)); } document.getElementById("srhBtn").onclick=function(){ var con = document.getElementById("search").value; var len = localStorage.length; for(var i = 0;i<len ;i++){ if(localStorage.key(i)==con){ var obj = JSON.parse(localStorage.getItem(con)); var html = "姓名："+obj.username+"<br/>"+ "邮箱："+obj.email+"<br/>"+ "电话："+obj.tel+"<br/>"+ "备注："+obj.info+"<br/>" document.getElementById("content").innerHTML = html; } } } </script> </html>