实际上是模拟实现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）的更多相关文章

  1. Html5学习之旅-html5的留言记事本开发（17）

    web留言记事本的开发 !!!!!代码如下 index.html的代码 <!DOCTYPE html> <html lang="en"> <head& ...

  2. 感谢各位亲们的大力支持，免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了！

    感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了.  有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连 ...

  3. HTML5 学习笔记--------》HTML5概要与新增标签！

      一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电. ...

  4. HTML5学习笔记：HTML5基于本地存储SQLite的每日工作任务清单程序.[只支持chrome]

    使用环境:Chrome 36.0...+ 技术:HTML5 目的:习练HTML5 功能概述:记录管理每天工作内容,便签清单 HTML5+CSS3呈现UI,JavaScript操作数据库,SQLite存 ...

  5. html5学习之旅第一篇

    什么是 HTML5? HTML5 是下一代 HTML 标准. HTML , HTML 4.01的上一个版本诞生于 1999 年.自从那以后,Web 世界已经经历了巨变. HTML5 仍处于完善之中.然 ...

  6. Html5的学习之旅-Html5的web Storage概述（16）

    在html5中除了canvas,另外一个非常重要的功能是客户端本地存储web storage,之前可以在用户端Cookies存贮用户名等信息,后来发现Cookies存储存在以下问题: 大小:Cooki ...

  7. HTML5学习总结-05 HTML5表单

    一 HTML5 新的类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. email url number range Date pickers (date, month ...

  8. HTML5学习笔记<六>: HTML5框架, 背景和实体

    HTML5框架 1. 框架标签(frame): 框架对于页面的设计有着很大的作用 2. 框架集标签(<frameset>): 框架集标签定义如何将窗口分割为框架 每个frameset定义一 ...

  9. HTML5学习笔记1 HTML5 新元素

    自1999年以后html4.0已经改变了很我,今天,在html4.01中的几个已经被废弃,这些元素在html5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,html5添加了很多新元素及功能 ...

随机推荐

  1. ES6(Decorator(修饰器）)

    Decorator(修饰器) 1.基本概念 函数用来修改 类 的行为 1.Decorator 是一个函数 2.通过Decorator(修饰器)能修改 类 的行为(扩展 类 的功能)3.Decorato ...

  2. Docker常见仓库CentOS

    CentOS 基本信息 CentOS 是流行的 Linux 发行版,其软件包大多跟 RedHat 系列保持一致. 该仓库提供了 CentOS 从 5 ~ 7 各个版本的镜像. 使用方法 默认会启动一个 ...

  3. 到底什么是集群&分布式

    对于楼主这样工作一年的菜鸟,偶尔会看到一些文章标题带有"分布式""集群"关键字,然后就懵逼了.最近对这些概念进行了一定的了解,整理了一下思路,在这里分享给各位猿 ...

  4. JFinal中使用QuartzPlugin报ClassCastException解决方法

    JDK1.8中泛型反射修改对旧版本的影响 本文地址:http://blog.csdn.net/sushengmiyan 本文作者:苏生米沿 问题复现环境: JDK1.8 JFinal1.9 quart ...

  5. [CSDN_Markdown] 使用LaTeX写矩阵

    简介 LaTeX 的公式功能非常强大,一次性讲全不是件容易的事情.将LaTeX 的这些功能分成较小的相互独立的部分来讲,一方面方便大家单独查阅:另一方面,所有[CSDN_Markdown]相关的文章都 ...

  6. [OpenCV]拓展图像边界

    图像处理中经常遇到使用当前像素邻的像素来计算当前像素位置的某些属性值,这样就会导致边界像素处越界访问,一般有两种方法解决这种问题:只对不越界的像素进行处理:对图像边界进行拓展,本文主要介绍如何使用Op ...

  7. Ubuntu Intel显卡驱动安装 （Ubuntu 14.04--Ubuntu 16.10 + Intel® Graphics Update Tool）

    最近使用在使用Ubuntu时,发现大部分情况下,不安装显卡驱动,使用默认驱动,都是没有问题的,但对于一些比较奇特配置的电脑,如下所示,如果使用默认驱动,会时常莫名其妙死机crash,尤其是在使用Ope ...

  8. Apache shiro集群实现 （一） shiro入门介绍

    近期在ITOO项目中研究使用Apache shiro集群中要解决的两个问题,一个是Session的共享问题,一个是授权信息的cache共享问题,官网上给的例子是Ehcache的实现,在配置说明上不算很 ...

  9. Linux 环境下一些常用的命令（二）

    11. chown命令 "chown"命令就是改变文件拥有者和所在用户组.每个文件都属于一个用户组和一个用户.在你的目录下,使用"ls -l",你就会看到像这样 ...

  10. iOS9中如何在日历App中创建一个任意时间之前开始的提醒(三)

    大熊猫猪·侯佩原创或翻译作品.欢迎转载,转载请注明出处. 如果觉得写的不好请多提意见,如果觉得不错请多多支持点赞.谢谢! hopy ;) 四.创建任意时间之前开始的提醒 现在我们找到了指定源中的指定日 ...