h5-29-WEB存储-通讯录实战.html 

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

　　

posted @ 2017-08-03 09:37  奋斗的少年WH  阅读(1225)  评论(0)    收藏  举报