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