<!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. Mockito的简单使用方法演示样例

    Mockito是一个流行的Mocking框架.它使用起来简单,学习成本非常低.并且具有非常简洁的API,測试代码的可读性非常高.因此它十分受欢迎,用 户群越来越多.非常多的开源的软件也选择了Mocki ...

  2. 一个重绘MFC的文件传输client

     一个重绘MFC的文件传输client,TCP/IP协议的文件传输client(支持上传.下载.续传.管理等功能,本处仅仅选择了上传功能).从用户视觉上看,肯定比原生MFC界面要有感觉,啥也不说了 ...

  3. 读书笔记-HBase in Action-第三部分应用-(2)GIS系统

    本章介绍用HBase存储.高效查询地理位置信息. Geohash空间索引 考虑LBS应用中常见的两个问题:1)查找离某地近期的k个地点.2)查找某区域内地点. 假设要用HBase实现高效查找,首先要考 ...

  4. sdk manager 创建的虚拟机启动的时候总是在Android字样解决

    一直显示Android字样.仅仅须要删除文件夹下的snapshots.img 找到sdk的文件夹下的\tools\lib\emulator,然后删除上面的文件snapshots.img就可以,我的sd ...

  5. 【C#】无损转换Image为Icon 【C#】组件发布：MessageTip，轻快型消息提示窗 【C#】给无窗口的进程发送消息 【手记】WebBrowser响应页面中的blank开新窗口及window.close关闭本窗体 【手记】调用Process.EnterDebugMode引发异常：并非所有引用的特权或组都分配给呼叫方 【C#】DataRowState演变备忘

    [C#]无损转换Image为Icon 如题,市面上常见的方法是: var handle = bmp.GetHicon(); //得到图标句柄 return Icon.FromHandle(handle ...

  6. 搭建Maven私服（使用Nexus）

    搭建私服能够做什么? 1.假设公司开发组的开发环境所有内网.这时怎样连接到在互联网上的Maven中央仓库呢? 2.假设公司常常开发一些公共的组件.怎样共享给各个开发组.使用拷贝方式吗?假设这样,公共库 ...

  7. C实现头插法和尾插法来构建单链表（不带头结点）

    链表的构建事实上也就是不断插入节点的过程.而节点的插入能够分为头插法和尾插法. 头插法就是在头结点后插入该节点,始终把该节点作为第一个节点.尾插法就是在链表的最后一个节点处插入元素,作为最后一个节点. ...

  8. wampserver64安装时出现计算机缺少MCVR110.DLL无法安装等

    在安装wamp完成后运行出现上述问题,是因为wamp版本与DLL不对称.下面给出 wamp64位下载地址 http://www.onlinedown.net/soft/118187.htm vcred ...

  9. OpenCV2马拉松第13圈——模版匹配

    收入囊中 在http://blog.csdn.net/abcd1992719g/article/details/25505315这里,我们已经学习了怎样利用反向投影和meanshift算法来在图像中查 ...

  10. adbi命令【转】

    本文转载自:https://zmywly8866.github.io/2015/01/24/all-adb-command.html   ADB很强大,记住一些ADB命令有助于提高工作效率. 获取序列 ...