<!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. webpack4.0各个击破（9）—— karma篇

    webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决方式的模式,以前端构建中遇到的具体需求为出发点,学习we ...

  2. 3. 基于优先级的Queue（PriorityBlockingQueue）

    package com.gf.conn013; import java.util.Iterator; import java.util.concurrent.PriorityBlockingQueue ...

  3. [LeetCode] 1. Two Sum 两数之和

    Part 1. 题目描述 (easy) Given an array of integers, return indices of the two numbers such that they add ...

  4. 环境搭建 - Maven（Windows）

    Maven环境搭建 本文以windows7下搭建Maven-3.5.0为示例 下载Maven压缩包 网址:Maven 非C盘根目录下新建文件夹:Maven D:\Maven 在Maven目录下新建文件 ...

  5. DIV中文字换行显示

    居然第一次遇到这种问题,还想了半天到底是怎么回事,为什么明明div设置宽度了,里面的文字超过宽度后居然不换行. (1)word-break属性,可以让浏览器实现在任意位置换行. normal:使用浏览 ...

  6. 深度 | AI芯片终极之战

    深度 | AI芯片终极之战 https://mp.weixin.qq.com/s?__biz=MzA4MTQ4NjQzMw==&mid=2652712307&idx=1&sn= ...

  7. linux下磁盘存储空间不足

    把自己平时遇到的问题分享给大家 Question:linux系统Ubuntu下面有一个Trash,当我们删除文件后,清空Trash,过一段时间发现磁盘空间不足 Answer:其实我们并没有真正的删除文 ...

  8. 珍藏版Chrome插件送给你们，不仅是程序员必备

    大家好,消失了几天我又满血复活归来了,最近这几天太忙了一直在加班工作,这不昨天又干到凌晨一点,今天早上七点就起来了,到现在还都没有休息,现在只剩半血了,不对应该说现在只能爬着走了,但是一想到几天没有更 ...

  9. ERROR 1071 (42000): Specified key was too long; max key length is 767 bytes

    今天在MySQL 5.6版本的数据库中修改InnoDB表字段长度时遇到了"ERROR 1071 (42000): Specified key was too long; max key le ...

  10. Django 数据流程图

    根据学习Django并且通过几个作业,发现Django制作网站的数据流程有些比较难懂,所以制作一个数据流程图,帮助自己理解,也希望对正学习的人有所帮助! 别的不多说,上美图: