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>
巴特西

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

最新文章

热门文章
