web留言记事本的开发

！！！！！代码如下

index.html的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>H5表格提交</title>
    <script src="appWeb.js"></script>
</head>
<body>
    <p id="msg"></p>
    <textarea id="memo" cols="60" rows="10"></textarea><br/>
    <input type="button" value="追加数据" onclick="saveStorage('memo')">
    <input type="button" value="删除数据" onclick="clearStorage()">
</body>
</html>

js的代码

function saveStorage(id){
    var data = document.getElementById(id).value;
    var time = new Date().getTime();
    localStorage.setItem(time,data);
    loadStorage('msg');
}
function loadStorage(id){
    var result = "<table border = '1'>";
    for(var i = 0;i < loadStorage.length;i++){
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        var date = new Date();
        date.setTime(key);
        result += "<tr><td>"+value+"</td><td>"+date+"</td></tr>";
    }
    result += "</table>";
    var target = document.getElementById(id);
    target.innerHTML = result;
}
function clearStorage(){
    localStorage.clear();
    loadStorage('msg');
}

！！！！效果图

Html5学习之旅-html5的留言记事本开发（17）的更多相关文章

  1. html5学习之旅-html5的简易数据库开发（18）

    实际上是模拟实现html5的数据库功能,用键值对的方式. !!!!!!废话不多说 ,代码 index.html的代码 <!DOCTYPE html> <html lang=" ...

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

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

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

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

  4. html5学习之旅第一篇

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. JAVA中的枚举类

    某些情况下一个类的对象是有限而且固定的,例如性别就只有两个类(考虑大众情况).因此这种实例有限而且固定的类,java里面叫枚举类.枚举类的关键字是enum,一些基本的命名规则和文件命名等细节和一般的类 ...

  2. Android 学习笔记一 自定义按钮背景图

    入门学到的一些组件都是比较规矩的,但在实际应用中,我们需要更多特色的组件,例如一个简单的Button,所以我们必须要自定义它的属性. 遇到的问题:用两张图片来代替按钮,分别表示点击前后 解决方法:用I ...

  3. Rails关闭html_safe字符串过滤

    在某些情况下我希望html的文本中包含一些换行,因为html5产生换行的方法是插入 <br />所以我可以这么写: text = "hello world!<br /> ...

  4. 如何处理IO

    Network I/O operations in user code should only be done through the Nginx Lua API calls as the Nginx ...

  5. lucene创建索引

    创建索引. 1.lucene下载. 下载地址:http://archive.apache.org/dist/lucene/java/. lucene不同版本之间有不小的差别,这里下载的是lucene ...

  6. proc文件系统探索 之 根目录下的文件[1]

    2.1根目录下的文件2.1.1lock文件内核锁,记录与被打开的文件有关的锁信息. 该文件显示当前被内核锁定的文件.该文件包含的内容是内核调试数据,根据使用的系统的这些数据会变化很大.一个/proc/ ...

  7. 多线程（三） 实现线程范围内模块之间共享数据及线程间数据独立（ThreadLocal）

    ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.JDK 1.2的版本中就提供java.lang.ThreadLocal,使用这个工具类可以很简洁地编写出优美的多线程程序,Threa ...

  8. ORACLE数据库学习之体系结构

     Oracle体系结构 ORACLE数据库体系结构决定了oracle如何使用网络.磁盘和内存.包括实例(instance),文件(file)和进程(process不包括后台进程)三部分. 实例:每 ...

  9. 闪屏页面开发遇到的问题you need to use a theme.appcompat theme (or descendant)

    开始做一个新闻客户端的应用,在做到闪屏页面时之前发布应用的时候总是报错,原因是我在splash.java中把Activty写成ActionBarActivity,导包,然后就可以了.以前也遇到过这种情 ...

  10. socket系列之socket服务端与客户端如何通信

    上面已经分别介绍了ServerSocket跟Socket的工作步骤,并且从应用层往系统底层剖析其运作原理,我们清楚了他们各自的一块,现在我们将把他们结合起来,看看他们是如何通信的,并详细讨论一下他们之 ...