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