1. <!DOCTYPE html>
  2. <html>
  3.  
  4. 	<head>
  5. 		<meta charset="UTF-8">
  6. 		<title></title>
  7. 	</head>
  8.  
  9. 	<body>
  10. 		<form name="form1" method="post" action="">
  11. 			<table width="500" border="1" cellpadding="5" cellspacing="0">
  12. 				<tr>
  13. 					<td colspan="2" align="center" bgcolor="#FFFF00">通讯录</td>
  14. 				</tr>
  15. 				<tr>
  16. 					<td width="80" align="center">姓名</td>
  17. 					<td width="204"><input type="text" name="username" id="username"></td>
  18. 				</tr>
  19. 				<tr>
  20. 					<td align="center">手机号码</td>
  21. 					<td><input type="tel" name="mobile" id="mobile"></td>
  22. 				</tr>
  23. 				<tr>
  24. 					<td align="center">QQ号码</td>
  25. 					<td><input type="number" name="qq" id="qq"></td>
  26. 				</tr>
  27. 				<tr>
  28. 					<td colspan="2" align="center">
  29. 						<input type="button" name="button" id="button" value="增加到联系人" onClick="add();">
  30. 						<input type="button" name="button5" id="button5" value="查询所有" onClick="queryAll()">
  31. 						<input type="button" name="button4" id="button4" value="修改联系人" onClick="update();">
  32. 						<input type="button" name="button3" id="button3" value="删除联系人" onClick="del();">
  33. 						<input type="reset" value="清空">
  34. 					</td>
  35. 				</tr>
  36. 			</table>
  37. 			<br/><br/>
  38. 			<table id="users" border="1px" cellspacing="0"></table>
  39. 			<script>
  40. 				function User(username, mobile, qq) {
  41. 					this.username = username;
  42. 					this.mobile = mobile;
  43. 					this.qq = qq;
  44. 				}
  45.  
  46. 				var username = document.form1.username;
  47. 				var mobile = document.form1.mobile;
  48. 				var qq = document.form1.qq;
  49.  
  50. 				//查询是否存在姓名相同的人
  51. 				function hasUser() {
  52. 					for(var i = 0; i < localStorage.length; i++) {
  53. 						var key = localStorage.key(i);
  54. 						var user = localStorage.getItem(key);
  55. 						var userjson = JSON.parse(user);
  56. 						if(username.value == userjson.username) {
  57. 							return userjson;
  58. 						}
  59. 					}
  60. 					return null;
  61. 				}
  62.  
  63. 				function add() {
  64. 					if(hasUser()) {
  65. 						alert("存在相同的联系人!");
  66. 						return;
  67. 					}
  68. 					if(username.value==""||username==null){
  69. 						alert("联系人不能为空！");
  70. 						return;
  71. 					}
  72. 					var user = new User(username.value, mobile.value, qq.value);
  73. 					var userStr = JSON.stringify(user);
  74. 					localStorage.setItem(username.value, userStr);
  75. 					alert("添加成功！");
  76. 				}
  77.  
  78. 				function queryAll() {
  79. 					var userDiv = document.getElementById("users");
  80. 					userDiv.innerHTML="";
  81. 					if(localStorage.length>0&&localStorage!=null){
  82. 						userDiv.innerHTML="<tr><td width='200px'>联系人</td><td width='200px'>电话</td><td width='200px'>qq</td></tr>";
  83. 						for(var i = 0; i < localStorage.length; i++) {
  84. 							var key = localStorage.key(i);
  85. 							var user = localStorage.getItem(key);
  86. 							var userjson = JSON.parse(user);
  87. 							userDiv.innerHTML += "<tr><td>" + userjson.username + "</td><td>" + userjson.mobile + "</td><td>" + userjson.qq + "</td></tr>";
  88. 						}
  89. 					} else {
  90. 						userDiv.innerHTML="没有缓存联系人！";
  91. 					}
  92.  
  93. 				function update(){
  94.  
  95. 				}
  96.  
  97. 				}
  98. 			</script>
  99. 	</body>
  100.  
  101. </html>

　　

h5-29-WEB存储-通讯录实战.html的更多相关文章

  1. 16-6 WEB存储-通讯录实战

    <!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, Android APP, IOS APP, iPad APP, Hybired APP, H5 Web共用共同的 ...

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

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

  6. OC：通讯录实战

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

  7. 【WEB API项目实战干货系列】- API访问客户端(WebApiClient适用于MVC/WebForms/WinForm)（四）

    这几天没更新主要是因为没有一款合适的后端框架来支持我们的Web API项目Demo, 所以耽误了几天, 目前最新的代码已经通过Sqlite + NHibernate + Autofac满足了我们基本的 ...

  8. 从零开始学 Web 之 HTML5（四）拖拽接口，Web存储，自定义播放器

    大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...

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

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

随机推荐

  1. angularjs开发常见问题-2（angularjs内置过滤器）

    在angular中内置了几个经常使用的filter,能够简化我们的操作. 过滤器使用 '|' 符号,概念有点相似于linux中的管道. 1.filter (过滤) filter能够依据条件过滤数据.样 ...

  2. VUE 之 组件

    组件是为了解决页面布局的. 什么是单页面? 答:整个页面的切换都是在这个页面上进行变化的,没有页面的刷新. 1.全局组件 1.1全局组件流程:    1.创建全局组件======>创建一个Vue ...

  3. MD5的学习与练习

    MD5加密的Java实现 在各种应用系统中,如果需要设置账户,那么就会涉及到存储用户账户信息的问题,为了保证所存储账户信息的安全,通常会采用MD5加密的方式来,进行存储.首先,简单得介绍一下,什么是M ...

  4. Hive 特性及原理

    特点:Hive是构建在hadoop之上的数据仓库.数据存储在hdfs上,数据计算用的mapreduce框架.用户无需掌握MR的编写,通过类SQL语句即可自动生成查询计划. 主要内容:     接入入口 ...

  5. PLSQL 安装说明

    PLSQL安装说明. 1.安装oracle 11g ,2030端口设置防火墙例外.2.PLSQL Developer 9.0.0.1601是绿色版,复制到本地即可.3.PLSQL->Tools- ...

  6. vscode——配置终端集成bash和cmd

    前言 配置后bash和cmd是集成的,输入bash回车则进入bash,输入cmd回车则进入cmd 步骤 首先肯定是需要打开我们的vscode咯~ 进入终端设置 配置shell路径 根据自己的系统来复制 ...

  7. javascript中基本类型和引用类型的区别分析

    大多数人系统学习过的程序设计语言,在这些语言的学习过程中最早学到的几个要点之一就是值类型和引用类型的区别.下面我们来看一下在 JavaScript 中基本数据类型(Primitive Types)和引 ...

  8. poj 1274 The Perfect Stall 解题报告

    题目链接:http://poj.org/problem?id=1274 题目意思:有 n 头牛,m个stall,每头牛有它钟爱的一些stall,也就是几头牛有可能会钟爱同一个stall,问牛与 sta ...

  9. Python机器视觉编程常用数据结构与示例

    本文总结了使用Python进行机器视觉(图像处理)编程时常用的数据结构,主要包括以下内容: 数据结构 通用序列操作:索引(indexing).分片(slicing).加(adding).乘(multi ...

  10. c++11实现DLL帮助类

    用过DLL的人都会发现,在C++中调用dll中的函数有点繁琐,调用过程如下:在加载dll后还要定义一个对应的函数指针类型,接着调用GetProcAddress获取函数地址,再转成函数指针,最后调用函数 ...