<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5</title>
<script type="text/javascript">
/*联系人数据*/
function Person(username,mobile,qq) {
this.username = username;
this.mobile = mobile;
this.qq = qq;
}
/*增加联系人*/
function add() {
var username = document.form1.username;
var mobile = document.form1.mobile;
var qq = document.form1.qq;
//判断联系人姓名是否已经存在
if ( checkUsername(username.value) ) {
alert('联系人已存在');
return;
}
var p = new Person(username.value,mobile.value,qq.value);
var jsonStr = JSON.stringify(p);
localStorage.setItem(p.username,jsonStr);
alert('联系人增加成功');
}
/*修改联系人*/
function update() {
var username = document.form1.username;
var mobile = document.form1.mobile;
var qq = document.form1.qq;
//判断联系人姓名是否已经存在
if ( !checkUsername(username.value) ) {
alert('联系人不存在');
return;
}
var p = new Person(username.value,mobile.value,qq.value);
var jsonStr = JSON.stringify(p);
localStorage.setItem(p.username,jsonStr);
alert('联系人修改成功');
}
/*删除联系人*/
function del() {
var username = document.form1.username;
//判断联系人姓名是否已经存在
if ( !checkUsername(username.value) ) {
alert('联系人不存在');
return;
}
localStorage.removeItem(username.value);
alert('联系人删除成功');
}
/*查询联系人*/
function queryByUsername() {
var username = document.form1.username;
var jsonObj = checkUsername(username.value);
if (jsonObj) {
document.form1.mobile.value = jsonObj.mobile;
document.form1.qq.value = jsonObj.qq;
} else {
alert('联系人不存在');
}
}
/*判断联系人是否存在，存在返回数据，不存在返回null*/
function checkUsername(usernameStr) {
var username = document.form1.username;
for (var i = 0; i < localStorage.length;i ++) {
var key = localStorage.key(i);
var jsonStr = localStorage.getItem(key);
var jsonObj = JSON.parse(jsonStr);
if (jsonObj.username == usernameStr)
return jsonObj;
}
return null;
}
</script>
</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="button2" id="button2" value="查询联系人" onClick="query();">
<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>
</form>
</body>
</html>
