<!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. Redux进阶（像VUEX一样使用Redux）

    更好的阅度体验 前言 redux的问题 方案目标 如何实现 思考 前言 Redux是一个非常实用的状态管理库,对于大多数使用React库的开发者来说,Redux都是会接触到的.在使用Redux享受其带 ...

  2. 【Angular专题】——（1）Angular，孤傲的变革者

    目录 一. 漫谈Angular 二. 如果你还在使用Angularjs 三. 我计划这样学习Angular技术栈 一. 漫谈Angular Angular,来自Google的前端SPA框架,与Reac ...

  3. 解决ajax跨域问题

    JQuery ajax支持get方式的跨域,采用了jsonp来完成.完成跨域请求的有两种方式实现.一种是使用Jquery ajax最底层的Api实现跨域的请求,而另一种则是JQuery ajax的高级 ...

  4. Asp.NetCore程序发布到CentOs(含安装部署netcore)--最佳实践(二）

    Asp.NetCore程序发布到CentOs(含安装部署netcore)--最佳实践(一) 接上一篇 3. Nginx配置反向代理 3.1 cnetos 安装nginx 首先,我们需要在服务器上安装N ...

  5. sql server2008数据库迁移的两种方案

    方案一 1,先将源服务器上的数据库文件打包(包括mdf和ldf文件),并且复制到目标服务器上. 2,解压,然后在目标服务器上附加数据库 总结:适合数据库巨大(50GB以上),需要快速迁移数据,并且移动 ...

  6. Flask 系列之 Migration

    说明 操作系统:Windows 10 Python 版本:3.7x 虚拟环境管理器:virtualenv 代码编辑器:VS Code 实验目标 通过使用 flask-migrate 实现数据库的迁移操 ...

  7. 原生js及H5模拟鼠标点击拖拽

    一.原生js 1.拖拽的流程动作 鼠标按下 触发onmousedown事件 鼠标移动 触发onmousemove事件 鼠标松开 触发onmouseup事件 2.注意事项: 要防止div移出可视框,要限 ...

  8. angular打包后路由和文件路径不对

    base href换成如下script标签 <!-- <base href="/"> --> <script> document.write(' ...

  9. 华为有AI，这场转型战有点大

    华为有AI,这场转型战有点大 https://mp.weixin.qq.com/s/qnUP5cgbNxXcAT82NQARtA 李根 发自 凹非寺 量子位 报道 | 公众号 QbitAI 华为有AI ...

  10. vmware 开启VM的硬件cpu虚拟化功能

    物理机的cpu硬件虚拟化功能,通过开启bios中的设置,而vmware中创建的虚拟机也可以开启该特性,如下. 这样的话,就直接可以基于这些VM安装openstack计算节点.控制节点.网络节点了.