16-6 WEB存储-通讯录实战
Posted 奋斗的少年WH
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了16-6 WEB存储-通讯录实战相关的知识,希望对你有一定的参考价值。
<!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>
以上是关于16-6 WEB存储-通讯录实战的主要内容,如果未能解决你的问题,请参考以下文章