实际上是模拟实现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. /usr，/usr/local/ 还是 /opt ？

    Linux 的软件安装目录是也是有讲究的,理解这一点,在对系统管理是有益的(好吧处女座表示完全不能接受不正确的路径选择,看着会不舒服的……) /usr:系统级的目录,可以理解为C:/Windows/, ...

  2. 使用WeihanLi.Redis操作Redis

    WeihanLi.Redis Intro StackExchange.Redis 扩展,更简单的泛型操作,并提供一些的适用于业务场景中的扩展 基于 Redis 的五种数据类型扩展出了一些应用: Str ...

  3. JAVAEE——BOS物流项目11：在realm中授权、shiro的方法注解权限控制、shiro的标签权限控制、总结shiro的权限控制方式、权限管理

    1 学习计划 1.在realm中进行授权 2.使用shiro的方法注解方式权限控制 n 在spring文件中配置开启shiro注解支持 n 在Action方法上使用注解 3.★使用shiro的标签进行 ...

  4. Scheme r5rs letrec的用法

    说明,这是r5rs的用法. (letrec ((<variable> <init>) ...) <body>) 假设((<variable> <i ...

  5. springMVC源码分析--RequestMappingHandlerAdapter（五）

    上一篇博客springMVC源码分析--HandlerAdapter(一)中我们主要介绍了一下HandlerAdapter接口相关的内容,实现类及其在DispatcherServlet中执行的顺序,接 ...

  6. ubuntu挂载的NTFS文件编译失败问题

    错误: 编译Android源代码时候出现,权限拒绝的错误 解决方法: sudo apt-get install ntfs-config sudo ntfs-config 我的微信二维码如下,欢迎交流讨 ...

  7. Java多线程的调度策略

    在Java多线程环境中,为保证所有线程的执行能按照一定的规则执行,JVM实现了一个线程调度器,它定义了线程调度的策略,对于CPU运算的分配都进行了规定,按照这些特定的机制为多个线程分配CPU的使用权. ...

  8. Building System之 get_abs_build_var() && get_build_var()

    点击打开链接 1.get_abs_build_var() 和 get_build_var()的实现都在build/envsetup.sh中. 2.在buld目录下grep这两个函数可知:这两个函数只在 ...

  9. Microsoft Dynamics CRM 2013/2015 选项集的多选

    CRM中的选项集多选一直是客户需求中的必选项,但从CRM进国内的3.0时代开始到目前的2015版本均没有提供该功能,但既然客户要了就得想办法满足,既然CRM本身的功能上不支持,那我们只有使用非官方支持 ...

  10. 2.2、Android Studio通过注解提升代码检测

    使用像Lint这样的代码检测工具可以帮助你发现问题和提升代码,但是代码检测在有些地方很难应用.例如,Android的资源ID,使用一个int类型来表示字符.图像.颜色或者其他资源类型所以代码检测工具不 ...