<!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存储-通讯录实战的更多相关文章

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

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. HTML5分析实战Web存储机制(Web Storage)

    Web Storage它是Key-Value在持久性数据存储的形式.Web Storage为了克服cookie把所引起的一些限制.当数据需要严格格控制client准时,没有必要不断地发回数据serve ...

  3. Selenium Web 自动化 - 项目实战(三)

    Selenium Web 自动化 - 项目实战(三) 2016-08-10 目录 1 关键字驱动概述2 框架更改总览3 框架更改详解  3.1 解析新增页面目录  3.2 解析新增测试用例目录  3. ...

  4. 【WEB API项目实战干货系列】- API登录与身份验证(三)

    上一篇: [WEB API项目实战干货系列]- 接口文档与在线测试(二) 这篇我们主要来介绍我们如何在API项目中完成API的登录及身份认证. 所以这篇会分为两部分, 登录API, API身份验证. ...

  5. OC:通讯录实战

    实战(使用OC的知识制作一个简易通讯录) //语法糖.笑笑语法 // NSString * string = [NSString stringWithFormat:@"string" ...

  6. Selenium Web 自动化 - 项目实战环境准备

    Selenium Web 自动化 - 项目实战环境准备 2016-08-29 目录 1 部署TestNG  1.1 安装TestNG  1.2 添加TestNG类库2 部署Maven  2.1 mav ...

  7. Selenium Web 自动化 - 项目实战(二)

    Selenium Web 自动化 - 项目实战(二) 2016-08-08 什么是数据驱动?简答的理解就是测试数据决定了测试结果,这就是所谓数据驱动.数据驱动包含了数据,他就是测试数据,在自动化领域里 ...

  8. web 存储方式汇总:Cookies,Session, Web SQL; Web Storage(LocalStorage ,SessionStorage),IndexedDB,Application Cache,Cache Storage

    1 1 1 web 存储方式汇总: 旧的方式: Cookies; Session; Web SQL; 新的方式 HTML5 : Web Storage(LocalStorage ,SessionSto ...

  9. html5的web存储

    在html5标准之前,web存储信息需要cookie来完成,但是cookie不适合大量数据存储.因为需要等待服务器响应,所以速度慢/效率低. 本地存储的特点: localstorage是仅存储在用户的 ...

随机推荐

  1. html 元素定位position-relative, absolute, fixed, static

    看到这个,你有什么想法? Difference between static and relative positioning 如果你能完全看明白,那几本上css 元素定位的东西基本都会了.本文也不用 ...

  2. 第五讲:使用html5中的canvas动态画出物理学上平抛运动

    <html> <head> <title>平抛运动</title> <script src="../js/jscex.jscexRequ ...

  3. 设计模式之解释器模式(Interpreter)摘录

    23种GOF设计模式一般分为三大类:创建型模式.结构型模式.行为模式. 创建型模式抽象了实例化过程,它们帮助一个系统独立于怎样创建.组合和表示它的那些对象.一个类创建型模式使用继承改变被实例化的类,而 ...

  4. JS日历控件 灵活设置: 精确的时分秒.

     在今年7月份时候 写了一篇关于 "JS日历控件" 的文章 , 当时仅仅支持 年月日 的日历控件,如今优化例如以下:      1. 在原基础上 支持 yyyy-mm-dd 的年月 ...

  5. 基于开源项目的在线网络视频直播项目---一个很好的电视直播开源项目Sopcast

    http://blog.csdn.net/roy_xu/article/details/2216559 http://115.com/?ct=rar&pickcode=ew52634xr2cr ...

  6. 在spring中映射X.hbm.xml文件的小技巧

    通常在spring中会这么写代码: <bean id="sessionFactory" class="org.springframework.orm.hiberna ...

  7. HDU2389 Rain on your Parade —— 二分图最大匹配 HK算法

    题目链接:https://vjudge.net/problem/HDU-2389 Rain on your Parade Time Limit: 6000/3000 MS (Java/Others)  ...

  8. unbantu安装mysql

    1,方法一 sudo apt-get install mysql-server apt isntall mysql-client apt install libmysqlclient-dev(暂不知用 ...

  9. 安装tensorflow的最简单方法(Ubuntu 16.04 && CentOS)

    先说点题外话:在用anaconda安装很多次tensorflow失败之后,我放弃了,如果你遇到这样的问题:Traceback (most recent call last)-如果不是因为pip版本,就 ...

  10. BZOJ4259:残缺的字符串(FFT与字符串匹配)

    很久很久以前,在你刚刚学习字符串匹配的时候,有两个仅包含小写字母的字符串A和B,其中A串长度为m,B串长度为n.可当你现在再次碰到这两个串时,这两个串已经老化了,每个串都有不同程度的残缺. 你想对这两 ...