<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form name="form1" method="post" action="">
<table width="500" border="1" cellpadding="5" cellspacing="0">
<tr>
<td colspan="2" align="center" bgcolor="#FFFF00">通讯录</td>
</tr>
<tr>
<td width="80" align="center">姓名</td>
<td width="204"><input type="text" name="username" id="username"></td>
</tr>
<tr>
<td align="center">手机号码</td>
<td><input type="tel" name="mobile" id="mobile"></td>
</tr>
<tr>
<td align="center">QQ号码</td>
<td><input type="number" name="qq" id="qq"></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="button" id="button" value="增加到联系人" onClick="add();">
<input type="button" name="button5" id="button5" value="查询所有" onClick="queryAll()">
<input type="button" name="button4" id="button4" value="修改联系人" onClick="update();">
<input type="button" name="button3" id="button3" value="删除联系人" onClick="del();">
<input type="reset" value="清空">
</td>
</tr>
</table>
<br/><br/>
<table id="users" border="1px" cellspacing="0"></table>
<script>
function User(username, mobile, qq) {
this.username = username;
this.mobile = mobile;
this.qq = qq;
}
var username = document.form1.username;
var mobile = document.form1.mobile;
var qq = document.form1.qq;
//查询是否存在姓名相同的人
function hasUser() {
for(var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
var user = localStorage.getItem(key);
var userjson = JSON.parse(user);
if(username.value == userjson.username) {
return userjson;
}
}
return null;
}
function add() {
if(hasUser()) {
alert("存在相同的联系人!");
return;
}
if(username.value==""||username==null){
alert("联系人不能为空！");
return;
}
var user = new User(username.value, mobile.value, qq.value);
var userStr = JSON.stringify(user);
localStorage.setItem(username.value, userStr);
alert("添加成功！");
}
function queryAll() {
var userDiv = document.getElementById("users");
userDiv.innerHTML="";
if(localStorage.length>0&&localStorage!=null){
userDiv.innerHTML="<tr><td width='200px'>联系人</td><td width='200px'>电话</td><td width='200px'>qq</td></tr>";
for(var i = 0; i < localStorage.length; i++) {
var key = localStorage.key(i);
var user = localStorage.getItem(key);
var userjson = JSON.parse(user);
userDiv.innerHTML += "<tr><td>" + userjson.username + "</td><td>" + userjson.mobile + "</td><td>" + userjson.qq + "</td></tr>";
}
} else {
userDiv.innerHTML="没有缓存联系人！";
}
function update(){
}
}
</script>
</body>
</html>
