您的位置：首页 > Web前端 > HTML5

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

2017-08-03 09:37 483 查看 
<!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>


　　
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航