html5学习之旅-html5的简易数据库开发（18）
实际上是模拟实现html5的数据库功能，用键值对的方式。
！！！！！！废话不多说 ，代码
index.html的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>H5表格提交</title>
<script src="appWeb.js"></script>
</head>
<body>
<table>
<tr><td>姓名：</td><td><input type="text" id="name"></td></tr>
<tr><td>email：</td><td><input type="text" id="email"></td></tr>
<tr><td>电话号码：</td><td><input type="text" id="tel"></td></tr>
<tr><td>备注：</td><td><input type="text" id="memo"></td></tr>
<tr>
<td></td>
<td><input type="button" value="保存" onclick="saveStorage()"></td>
</tr>
</table>
<hr/>
<p>检索：
<input type="text" id="find">
<input type="button" value="检索" onclick="findStorage('msg')">
</p>
<p id="msg"></p>
</body>
</html>！！！！js代码
function saveStorage(){
var data = new Object();
data.name = document.getElementById("name").value;
data.email = document.getElementById("email").value;
data.tel = document.getElementById("tel").value;
data.memo = document.getElementById("memo").value;
var str = JSON.stringify(data);
localStorage.setItem(data.name,str);
alert("data saved");
}
function findStorage(id){
var find = document.getElementById("find").value;
var str = localStorage.getItem(find);
var data = JSON.parse(str);
var result = "name:"+data.name+"<br/>";
result += "email:"+data.email+"<br/>";
result += "tel:"+data.tel+"<br/>";
result += "memo:"+data.memo+"<br/>";
var target = document.getElementById(id);
target.innerHTML = result;
}！！！！效果图
html5学习之旅-html5的简易数据库开发（18）的更多相关文章
- Html5学习之旅-html5的留言记事本开发（17）
web留言记事本的开发 !!!!!代码如下 index.html的代码 <!DOCTYPE html> <html lang="en"> <head& ...
- 感谢各位亲们的大力支持，免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了！
感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了. 有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...
- HTML5 学习笔记--------》HTML5概要与新增标签！
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...
- HTML5学习笔记：HTML5基于本地存储SQLite的每日工作任务清单程序.[只支持chrome]
使用环境:Chrome 36.0...+ 技术:HTML5 目的:习练HTML5 功能概述:记录管理每天工作内容,便签清单 HTML5+CSS3呈现UI,JavaScript操作数据库,SQLite存 ...
- html5学习之旅第一篇
什么是 HTML5? HTML5 是下一代 HTML 标准. HTML , HTML 4.01的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍处于完善之中.然 ...
- Html5的学习之旅-Html5的web Storage概述（16）
在html5中除了canvas,另外一个非常重要的功能是客户端本地存储web storage,之前可以在用户端Cookies存贮用户名等信息,后来发现Cookies存储存在以下问题: 大小:Cooki ...
- HTML5学习总结-05 HTML5表单
一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...
- HTML5学习笔记<六>: HTML5框架, 背景和实体
HTML5框架 1. 框架标签(frame): 框架对于页面的设计有着很大的作用 2. 框架集标签(<frameset>): 框架集标签定义如何将窗口分割为框架 每个frameset定义一 ...
- HTML5学习笔记1 HTML5 新元素
自1999年以后html4.0已经改变了很我,今天,在html4.01中的几个已经被废弃,这些元素在html5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,html5添加了很多新元素及功能 ...
随机推荐
- Python3 教程
Python的3.0版本,常被称为Python 3000,或简称Py3k.相对于Python的早期版本,这是一个较大的升级.为了不带入过多的累赘,Python 3.0在设计的时候没有考虑向下兼容. 查 ...
- ZooKeeper之（五）集群管理
在一台机器上运营一个ZooKeeper实例,称之为单机(Standalone)模式.单机模式有个致命的缺陷,一旦唯一的实例挂了,依赖ZooKeeper的应用全得完蛋. 实际应用当中,一般都是采用集群模 ...
- 使用GDAL进行RPC坐标转换
使用GDAL进行RPC坐标转换 对于高分辨率遥感卫星数据而言,目前几乎都提供了有理函数模型(RFM)来进行图像校正(SPOT系列提供了有理函数模型之外还提供了严格轨道模型).对遥感影像进行校正目前最常 ...
- linux网络编程之二-----多播（组播）编程
多播编程实例 服务器端 下面是一个多播服务器的例子.多播服务器的程序设计很简单,建立一个数据包套接字,选定多播的IP地址和端口,直接向此多播地址发送数据就可以了.多播服务器的程序设计,不需要服务器加入 ...
- /proc/stat 详解
在Linux系统中,可以用/proc/stat文件来计算cpu的利用率.这个文件包含了所有CPU活动的信息,该文件中的所有值都是从系统启动开始累计到当前时刻. cat /proc/stat cpu 6 ...
- ERROR: In <declare-styleable> MenuView, unable to find attribute android:preserveIconSpacing
eclipse sdk从低版本切换到高版本sdk的时候 v7包会包这个错ERROR: In <declare-styleable> MenuView, unable to find ...
- HDFS的写数据过程分析
HDFS的写数据过程分析 我们通过FileSystem类可以操控HDFS, 那我们就从这里开始分析写数据到HDFS的过程. 在我们向 HDFS 写文件的时候,调用的是 FileSystem.creat ...
- x264源代码简单分析：x264命令行工具（x264.exe）
===================================================== H.264源代码分析文章列表: [编码 - x264] x264源代码简单分析:概述 x26 ...
- Java学习之运算符使用注意的问题
运算符使用注意的问题 运算符(掌握) (1)算术运算符 A:+,-,*,/,%,++,-- B:+的用法 a:加法 b:正号 c:字符串连接符 C:/和%的区别 数据做除法操作的时候,/取得是商,%取 ...
- 一个都不能少: DevOps的3大核心基础架构
DevOps的涵盖面非常广,因为这个概念的火热,又有很多文章和技术都在把DevOps的帽子扣在自己头上,让很多人迷惑不解.其实,DevOps的知识体系如果从顶层上来分解,只有2块:方法论和工具链.方法 ...