使用IndexedDB数据库实现手机通讯录管理功能
**
使用IndexedDB数据库实现手机通讯录管理功能
**
实现要求
1.创建phoneInfo数据库，创建phone对象仓库，用于保存每个用户的通讯信息。
2.手机通讯信息结构为姓名name、电话phone。
3.按钮功能：点击“添加”按钮，将用户在表单中输入的合法用户姓名和电话添加到phone对象仓库中，并同时添加到多行文本域中。点击“查询”按钮，将根据用户在姓名中输入的内容，在对象仓库中查询，并显示在“电话”对应的文本框中。点击“删除”按钮，将根据用户在姓名中输入的内容，查找对应的对象，并删除，同时自动更新下列多行文本框中的通讯录。点击“重置”按钮，将表单中输入域的内容清空。
4.页面各元素要求用HTML5的标签实现。如header、footer、tel等。
模块设计
1.创建对象仓库。
//保存一条通讯记录数据，同时显示在div中
function saveInfo(){
var name1=$("username").value;//取姓名
var phone1=$("userphone").value; //取电话
if (name1!="" && phone1!="") //不为空处理
{
localStorage.setItem(name1,phone1);
loadAllInfo();
alert("添加成功");
$("username").value=""; //添加成功后置空
$("username").focus(); //获得焦点
$("userphone").value=""; //添加成功后置空
}else{ //姓名或电话为空，告警并获得焦点
alert("请输入姓名和电话！");
$("username").focus();
}
}
//div设计
<div id="displayallinfo" name="displayallinfo">
<textarea name="" rows="8" cols="30" id="phoneset"></textarea>
</div>
2.页面表单实现。
<form method="post" action="">
<fieldset style="width:300px;text-align:center;">
<legend>简易手机通讯录</legend>
<label for="name">姓名：</label>
<input type="text" id="username" name="username" required/> <br/>
<label for="telphone">电话：</label>
<input type="text" id="userphone" name="userphone" required/><br/>
<br>
<input type="button" onclick="saveInfo()" value="添加"/>
<input type="button" onclick="findForName()" value="查询"/>
<input type="button" onclick="deleteName()" value="删除"/>
<input type="reset">
</form>
3.其他功能函数实现。
//以姓名查找通讯录信息
function findForName(){
var searchname = $("username").value;
var searchphone = localStorage.getItem(searchname); //取电话
$("userphone").value=searchphone; //填充电话
}
//从localStorage中取出所有通讯录中信息，并展现到界面上
function loadAllInfo(){
// localStorage.clear();
var result = "";
if(localStorage.length>0){
result += "姓名 电话\n";
for(var i=0;i<localStorage.length;i++){
var name= localStorage.key(i);
var phone = localStorage.getItem(name);
result += name+" --- "+phone+"\n";
}
$("phoneset").innerHTML = result;
}else{
$("phoneset").innerHTML = "通讯录为空……";
}
}
//删除某一条通讯信息
function deleteName(){
$("userphone").readonly="readonly";
localStorage.removeItem($("username").value); //按姓名删除通讯录
$("userphone").value=""; //电话置空
$("username").value=""; //姓名置空
$("username").focus(); //获得焦点
loadAllInfo();
}
4.完整的web前端代码实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易手机通讯录</title>
<script>
//保存一条通讯记录数据，同时显示在div中
function $(id){return document.getElementById(id);}
function saveInfo(){
var name1=$("username").value;//取姓名
var phone1=$("userphone").value; //取电话
if (name1!="" && phone1!="") //不为空处理
{
localStorage.setItem(name1,phone1);
loadAllInfo();
alert("添加成功");
$("username").value=""; //添加成功后置空
$("username").focus(); //获得焦点
$("userphone").value=""; //添加成功后置空
}else{ //姓名或电话为空，告警并获得焦点
alert("请输入姓名和电话！");
$("username").focus();
}
}
//以姓名查找通讯录信息
function findForName(){
var searchname = $("username").value;
var searchphone = localStorage.getItem(searchname); //取电话
$("userphone").value=searchphone; //填充电话
}
//从localStorage中取出所有通讯录中信息，并展现到界面上
function loadAllInfo(){
// localStorage.clear();
var result = "";
if(localStorage.length>0){
result += "姓名 电话\n";
for(var i=0;i<localStorage.length;i++){
var name= localStorage.key(i);
var phone = localStorage.getItem(name);
result += name+" --- "+phone+"\n";
}
$("phoneset").innerHTML = result;
}else{
$("phoneset").innerHTML = "通讯录为空……";
}
}
//删除某一条通讯信息
function deleteName(){
$("userphone").readonly="readonly";
localStorage.removeItem($("username").value); //按姓名删除通讯录
$("userphone").value=""; //电话置空
$("username").value=""; //姓名置空
$("username").focus(); //获得焦点
loadAllInfo();
}
</script>
</head>
<body onload="loadAllInfo();">
<article style="width:350px;height:450px;text-align:center;border:12px groove #0099cc;margin:0 auto;padding:20px;">
<header>
<h3 style="background:#ededed;padding:10px auto;">手机通讯录管理器</h3>
</header>
<form method="post" action="">
<fieldset style="width:300px;text-align:center;">
<legend>简易手机通讯录</legend>
<label for="name">姓名：</label>
<input type="text" id="username" name="username" required/><br/>
<label for="telphone">电话：</label>
<input type="text" id="userphone" name="userphone" required/><br/>
<br>
<input type="button" onclick="saveInfo()" value="添加"/>
<input type="button" onclick="findForName()" value="查询"/>
<input type="button" onclick="deleteName()" value="删除"/>
<input type="reset">
</form>
<div id="displayallinfo" name="displayallinfo">
<textarea name="" rows="8" cols="30" id="phoneset"></textarea>
</div>
</fieldset>
<footer style="background:#ededed;height:40px;">
<p><strong>前端工作室设计</strong><br>
<strong>版权所有©，2017-2020</strong></p>
</footer>
</article>
</body>
</html>
实现效果
主页面 -> 添加联系人
欢迎 点赞+评论+关注 喔！
