<!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. Java 学习笔记 使用并发包ReentrantLock简化生产者消费者模式代码

    说明 ReentrantLock是java官方的一个线程锁类,ReentarntLock实现了Lock的接口 我们只需要使用这个,就可以不用使用synchronized同步关键字以及对应的notify ...

  2. es6 Symbol类型

    es6 新增了一个原始类型Symbol,代表独一无二的数据 javascript 原来有6中基本类型, Boolean ,String ,Object,Number, null , undefined ...

  3. Html和Css学习笔记-html进阶-div与span

    我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 此篇博客是我的复习笔记,html和css学的时间太久了,忘得差不多了,最近要使用一下,所以重新打开html的书略读,后记录了标签 ...

  4. Sql server 2014 数据库还原奇异现象

    用A库来还原B库   对正在使用的B库执行还原,还原时修改数据库名称,还原出错,提示数据库正在使用.删除B库,仍然提示正在使用,感觉像僵尸     重启SQL SERVER,因B库已删除,在A库上点击 ...

  5. join的简单总结

    BAT面试题:现在有T1.T2.T3三个线程,你怎样保证T2在T1执行完后执行,T3在T2执行完后执行? 这个线程问题通常会在第一轮或电话面试阶段被问到,目的是检测你对”join”方法是否熟悉.这个多 ...

  6. 手持式停车收费管理系统全套案例，支持车牌识别，包含了android版app，微信小程序查询，响应式管理后台，云端大数据存储

    先展示几个app效果图片吧,使用起来非常方便,关联了机器的快捷键操作,操作速度提高了不少,摄像头车牌自动识别,车牌识别无网络情况下离线也可以使用   再来一张后台截图,停车场信息完整显示,今日数据实时 ...

  7. Actor模型浅析 一致性和隔离性

    一.Actor模型介绍 在单核 CPU 发展已经达到一个瓶颈的今天,要增加硬件的速度更多的是增加 CPU 核的数目.而针对这种情况,要使我们的程序运行效率提高,那么也应该从并发方面入手.传统的多线程方 ...

  8. SQL Server Mirror 断开后，删除副本上镜像数据库

    一般而言,SQL Server 在数据库级别进行数据同步的方式主要有三种 1.日志传送:2.Mirror(镜像):3. AlwaysOn.复制订阅技术理解为表级别的同步,不归结为数据库级别的同步. 在 ...

  9. MySQL5.7参数log_timestamps

    最近测试MySQL 5.7.21  Community Server这个版本的MySQL数据库时,发现其错误日志的时间跟系统当前时间不一致,后面检查发现日期时间格式都是UTC时间,查了一下相关资料,原 ...

  10. lnmp环境里安装mssql及mssql的php扩展

    小活中用到mssql,于是在自己lnmp环境中安装各mssql数据库 步骤如下: 源码编译安装 (1)下载freetds-stable-0.91源码:http://download.csdn.net/ ...