一 代码
<!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()
+ " " + 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>
二 运行效果
相关推荐
Web Storage（包括localStorage和sessionStorage）为浏览器提供了本地数据存储的能力，解决了Cookie的大小和安全性限制。 **移动Web与Progressive Web Apps (PWA)** 随着移动设备的普及，移动Web成为不可或缺的一...
本篇将深入探讨如何利用Web Storage实现一个本地留言板的功能。 首先，我们需要了解`localStorage`和`sessionStorage`的基本用法。两者都是基于键值对（key-value pairs）的数据存储方式，不同之处在于： 1. `...
2. **速度快**：Web Storage 直接在客户端存储，读写速度远快于发送HTTP请求到服务器。 3. **安全性**：数据不会随着HTTP请求发送到服务器，增加了隐私保护。 4. **应用场景广泛**：可以用于实现离线应用、页面状态...
《Web Storage技术详解》 在当今的Web应用中，数据存储是不可或缺的一部分。随着Web应用程序功能的日益增强，对本地存储的需求也在不断增长。传统的Cookie技术由于其存储量小、性能低等限制，已无法满足现代Web应用...
软件名称：华硕网络存储:WebStorage APK名称：com.ecareme.asuswebstorage 最新版本：2.1.28.8207 支持ROM：2.2及更高版本 界面语言：简体中文 软件大小：10.23 M 软件简介： 全球超过三千万个注册用户；Google ...
还在烦恼JS前端，或者移动端缓存使用什么来储存吗。可以使用web-storage-cache.js，进行数据缓存。
HTML5中的Web Storage是网页应用用来在客户端存储数据的重要特性，它主要分为两种类型：sessionStorage和localStorage。这两种存储方式都是为了替代传统Cookie的局限性，提供更大的存储空间和更高效的本地数据管理。...
react-webstorage 直接使用 W3C WebStorage API 的任何实现作为 React/Flux 风格的存储。 var WebStorage = require ( 'react-webstorage' ) , dispatcher = require ( './path/to/app-dispatcher' ) ; var web...
Storage Manager管理软件客户端安装与IBM DS系列存储调试 本文将详细介绍如何安装Storage Manager管理软件客户端并调试IBM DS系列存储。这里我们将从准备工作开始，步骤详细介绍客户端软件的安装过程，并对客户端的...
贡多里Ondotori Web Storage API客户端（T＆D WebStorage Service API客户端）安装go get -u github.com/k28/go-ondotori例子获取当前读数package mainimport ("context""fmt""github.com/k28/go-ondotori")func ...
var webstorage = require ( 'webstorage' ) ; var storage = webstorage ( ) ; storage . setItem ( 'foo' , 'bar' ) ; storage . getItem ( 'foo' ) // => 'bar' 如果你想在本地持久化数据，你可以使用插件。 ...
例如，离线存储（Application Cache）允许应用在没有网络连接时也能运行部分内容，Web Storage和IndexedDB提供了本地数据存储解决方案，Canvas和SVG则用于图形绘制，而Web Workers和WebRTC则提升了性能和多媒体支持...
Web Storage分为两种类型：localStorage和sessionStorage，它们都是为了解决浏览器端的数据存储问题。 1. 本地存储（localStorage）：在HTML5之前，网页应用程序主要依赖Cookie来存储用户数据，但Cookie存在明显的...
标题中的"cloudstorage_web_参考.rar"表明这是一个与云存储相关的Web应用的参考资料。描述中的"cloudstorage_web_参考"进一步确认了这一点，暗示我们可能要探讨的是一个云存储服务的Web接口或平台的实现、设计或者...
IndexedDB的API较之WebStorage更为复杂，但功能也更加强大，对于需要高效处理大量数据的Web应用而言，IndexedDB是一个非常合适的选择。 ### 总结 本地存储技术的发展，从Cookie到WebStorage再到IndexedDB，体现了...
在本文中，我们将详细探讨如何安装Storage Manager 9.15客户端，并了解客户端安装和调试过程中的关键知识点。 首先，确保你有一台台式机或笔记本电脑，配置好以太网线连接，以便与DS4000系列存储设备通信。客户端的...
总结来说，"Node.js-webStorage封装库-支持cookie解决方案"是一个旨在简化客户端数据存储并增强其功能的工具，它通过提供统一的接口和扩展功能，使得开发者在处理localStorage、sessionStorage和cookie时更为...
Web Storage 是现代 Web 应用中非常实用的技术，它提供了一种方便的手段来在客户端持久存储数据，从而减轻服务器端的存储压力。同时，由于存储的数据不需要通过网络传输，也提升了数据存取的速度。但需要注意的是，...
网络存储本地 一个持久性插件为本地文件存储。... var webstorage = require ( 'webstorage' ) ; var local = require ( 'webstorage-local' ) ; webstorage ( local ( '/tmp' ) ) ; 执照 麻省理工学院