<!DOCTYPE html>

<html>

<head>

    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />

    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />

    <title> 客户端留言板 </title>

    <style type="text/css">

        table {

            border-collapse: collapse;

        }

        td , th{

            border: 1px solid #888;

            padding: 4px;

        }

    </style>

</head>

<body>

<h2>客户端留言板</h2>

<textarea id="msg" name="msg" cols="50" rows="8"></textarea><br/>

<input type="button" value="添加留言" onclick="addMsg();"/>

<input type="button" value="清除留言" onclick="clearMsg();"/>

<hr/>

<table style="width:550px">

    <tr>

        <th>留言内容</th>

        <th>留言时间</th>

    </tr>

    <tbody id="show"></tbody>

</table>

<script type="text/javascript">

    // 加载留言信息

    var loadMsg = function()

    {

        var tb = document.getElementById("show");

        // 清空原来显示的内容。

        tb.innerHTML = "";

        // 遍历所有留言信息

        for(var i = 0 ; i < localStorage.length ; i++)

        {

            var key = localStorage.key(i);

            var date = new Date();

            date.setTime(key);

            // 获取留言时间

            var datestr = date.toLocaleDateString()

                    + "&nbsp;" + date.toLocaleTimeString();

            // 获取留言内容

            var value = localStorage.getItem(key);

            var row = tb.insertRow(i);

            // 添加第一个单元格，并显示留言内容

            row.insertCell(0).innerHTML = value;

            // 添加第二个单元格，并显示留言内容。

            row.insertCell(1).innerHTML = datestr;

        }

    }

    var addMsg = function()

    {

        var msgElement = document.getElementById("msg");

        var time = new Date().getTime();

        // 以当前时间为key来保存留言信息

        localStorage.setItem(time , msgElement.value);

        msgElement.value = "";

        alert("数据已保存。");

        loadMsg();

    }

    function clearMsg()

    {

        // 清空Local Storage里保存的数据。

        localStorage.clear();

        alert("全部留言信息已被清除。");

        loadMsg();

    }

    window.onload = loadMsg();

</script>

</body>

</html>

H5 基于Web Storage 的客户端留言板的更多相关文章

  1. 基于Web Service的客户端框架搭建四：终结篇

    前言 这是这个系列的终结篇,前面3个博客介绍了一下内容: 1.使用Http Post方式调用Web Service 2.客户端框架之数据转换层 3.客户端框架之代理层 框架结构 框架是基于C#的,在V ...

  2. 基于Web Service的客户端框架搭建一：C#使用Http Post方式传递Json数据字符串调用Web Service

    引言 前段时间一直在做一个ERP系统,随着系统功能的完善,客户端(CS模式)变得越来越臃肿.现在想将业务逻辑层以下部分和界面层分离,使用Web Service来做.由于C#中通过直接添加引用的方来调用 ...

  3. 基于Web Service的客户端框架搭建二：数据转换层（FCL）

    引言 要使用WebService来分离客户端与服务端,必定要使用约定好两者之间的数据契约.Json数据以其完全独立于语言的优势,成为开发者的首选.C# JavaScriptSerializer为Jso ...

  4. 基于Web Service的客户端框架搭建三：代理层（Proxy）

    前言 代理层的主要工作是调用Web Service,将在FCL层序列化好的Json数据字符串Post到Web Service,然后获得Reponse,再从响应流中读取到调用结果Json字符串,在Dis ...

  5. H5中使用Web Storage来存储结构化数据

    在上一篇对Web Storage的介绍中,可以看到,使用Storage保存key—value对时,key.value只能是字符串,这对于简单的数据来说已经够了,但是如果需要保存更复杂的数据,比如保存类 ...

  6. H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  7. J2EE进阶(十八)基于留言板分析SSH工作流程

    J2EE进阶(十八)基于留言板分析SSH工作流程   留言板采用SSH(Struts1.2 + Spring3.0 + Hibernate3.0)架构.   工作流程(以用户登录为例):   首先是用 ...

  8. 解析H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  9. Web开发从零单排之二：在自制电子请帖中添加留言板功能,SAE+PHP+MySql

    在上一篇博客中介绍怎样在SAE平台搭建一个html5的电子请帖网站,收到很多反馈,也有很多人送上婚礼的祝福,十分感谢! web开发从零学起,记录自己学习过程,各种前端大神们可以绕道不要围观啦 大婚将至 ...

随机推荐

  1. HAProxy负载均衡技术

    软件负载均衡一般通过两种方式来实现:基于操作系统的软负载实现和基于第三方应用的软负载实现.LVS就是基于Linux操作系统实现的一种软负载,HAProxy就是开源的并且基于第三应用实现的软负载. HA ...

  2. .net 用ajaxFileUpload 上传超过20M文件设置

    1.在web.config的 <system.web>  节点里面添加   <httpRuntime targetFramework="4.5.2"  execu ...

  3. Android Studio 学习（七）通知

    导入support- -v4 1.进入 file-project structure 2.左边选择app 3.右边选择dependencies 4.左下角可以看到一个加号,点击选择Library de ...

  4. 前端入门16-JavaScript进阶之EC和VO

    声明 本系列文章内容全部梳理自以下几个来源: <JavaScript权威指南> MDN web docs Github:smyhvae/web Github:goddyZhao/Trans ...

  5. Sublime Text 快捷键列表

    Sublime Text 快捷键列表 快捷键按类型分列如下: 补充:1.快速的创建一个html页 :ctrl+n创建一个新的文件-->右下角选择文件类型-->输入英文"!&quo ...

  6. 通过Arcpy在ArcMap工具箱中添加脚本计算面图层的起终点坐标

    关键词: Arcpy,ArcMap Toolbox, Coordinates of Polygon 需求分析: Arcmap中添加有三个图层:图层“GY乡级河道”(面图层)是全县13个乡镇全部的乡级河 ...

  7. 互联网安全中心(CIS)发布新版20大安全控制

    这些最佳实践最初由SANS研究所提出,名为“SANS关键控制”,是各类公司企业不可或缺的安全控制措施.通过采纳这些控制方法,公司企业可防止绝大部分的网络攻击. 有效网络防御的20条关键安全控制 对上一 ...

  8. Apex 中的自定义迭代器

    迭代器 迭代器(iterator)可以遍历一个集合变量中的每个元素.Apex提供了Iterator接口来让开发者实现自定义的迭代器. Iterator接口 Iterator接口定义了两个函数: has ...

  9. Web项目发布后字体文件找不到

    一.问题 ①ASP.NET项目,开发工具Visual Studio ②在IIS上发布之后,网页控制台报错,某某文件找不到,但是在服务器文件夹中看明明有那个文件 二.解决方法 ①>>打开II ...

  10. 常用SMTP地址

    1.QQ邮箱(mail.qq.com) POP3服务器地址:pop.qq.com(端口:110) SMTP服务器地址:smtp.qq.com(端口:25) 2.搜狐邮箱(sohu.com): POP3 ...