<!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. Pycharm远程调试原理及配置

    工作中使用Pycharm作为python开发的IDE,作为专业的python集成开发环境,其功能之强大令人折服.开发过程中Debug是必不可少的.平时经常使用Pycharm的remote debug功 ...

  2. 结识hybrid体验这一年

    在这之前虽然看过一些博客介绍 hybrid,但是始终没有具体应用场景,想象的就是我现在做好了一个网站,然后 native 直接在 webview 中打开我的网站,类似浏览器中打开网站一样,头部添加一个 ...

  3. Java与.net的选择和比较

    跨平台对开发商是一个巨大的诱惑.一次开发,多个平台使用,降低了迁移成本,有利.但Java的开发工具没有.net顺手,对编码人员的要求比.net要高. .net培训成本低,上手快.尤其如果开发人员以前都 ...

  4. Web前端 页面功能——点击按钮返回顶部的实现方法

    1. 最简单的静态返回顶部,点击直接跳转页面顶部,常见于固定放置在页面底部返回顶部功能 方法一:用命名锚点击返回到顶部预设的id为top的元素 html代码 <a href="#top ...

  5. 简易仿ios菊花加载loading图

    原文链接:https://mp.weixin.qq.com/s/wBbQgOfr59wntNK9ZJ5iRw 项目中经常会用到加载数据的loading显示图,除了设计根据app自身设计的动画loadi ...

  6. Centos7VMware虚拟机最小化安装后，安装Tenda U12 USB无线网卡驱动

    前几天买下了Tenda U12 USB 无线网卡 ,想连接上无线玩玩,可惜买下折腾了一周才解决他它驱动问题,前后在VMware上装了十多次,测试了好几个内核版本才搞定,好了废话不多说,分享下我安装过程 ...

  7. mssql sqlserver 索引专题

    摘要: 下文将详细讲述sql server 索引的相关知识,如下所示: 实验环境: sql server 2008 R2 sqlserver索引简介: mssql sqlsever 索引分类简介 ms ...

  8. 解决vs启动出现“cannot find one or more components .Please reinstall the application”

    参考下文: https://blog.csdn.net/novice_growth/article/details/71627395

  9. HybridStart发布v1.0测试版

    HybridStart是一款多webview模式的混合应用前端开发框架,本来只是作者自用的一套混合应用开发模板,为了进一步提高混合应用开发效率,近期着重在框架高通用性和易用性方面做了较大改进,比如将U ...

  10. python 词云学习

    词云入门 三步曲 数据获取:使用爬虫在相关网站上获取文本内容 数据清洗:按一定格式对文本数据进行清洗和提取(文本分类,贴标签) 数据呈现:多维度呈现和解读数据(计算,做表,画图) 一 模块的安装 pi ...