一 介绍
Web Storage结构化存储的实现步骤如下：
1、存储结构化数据
1.1:把结构数据封装在JSON对象中。
1.2:把JSON对象转换为字符串后再进行保存。
2、读取结构化数据
2.1:读取JSON格式的字符串。
2.2:通过JSON对象的属性来提取。
二 代码
<!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>
留言标题：<input id="title" name="title" type="text" size="60"/><br/>
留言信息：<textarea id="content" name="content" cols="50" rows="8"></textarea><br/>
留言人：<input id="user" name="user" type="text"/><br/>
<input type="button" value="添加留言" onclick="addMsg();"/>
<input type="button" value="清除留言" onclick="clearMsg();"/>
<hr/>
<table style="width:750px">
<tr>
<th>留言标题</th>
<th>留言内容</th>
<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 msgStr = localStorage.getItem(key);
// 把留言字符串转换成JavaScript对象
var msg = JSON.parse(msgStr);
var row = tb.insertRow(i);
// 添加第一个单元格，并显示留言内容
row.insertCell(0).innerHTML = msg.title;
// 添加第二个单元格，并显示留言内容
row.insertCell(1).innerHTML = msg.content;
// 添加第三个单元格，并显示留言内容
row.insertCell(2).innerHTML = msg.user;
// 添加第四个单元格，并显示留言内容。
row.insertCell(3).innerHTML = datestr;
}
}
var addMsg = function()
{
var titleElement = document.getElementById("title");
var contentElement = document.getElementById("content");
var userElement = document.getElementById("user");
// 将留言标题、留言内容、留言用户封装成对象
var msg = {
title: titleElement.value,
content: contentElement.value,
user: userElement.value
}
var time = new Date().getTime();
// 以当前时间为key来保存留言信息
localStorage.setItem(time , JSON.stringify(msg));
titleElement.value = "";
contentElement.value = "";
userElement.value = "";
alert("数据已保存。");
loadMsg();
}
function clearMsg()
{
// 清空Local Storage里保存的数据。
localStorage.clear();
alert("全部留言信息已被清除。");
loadMsg();
}
window.onload = loadMsg();
</script>
</body>
</html>
三 运行结果
相关推荐
这个项目的核心目标是创建一个简单的留言板，用户可以在上面留下信息，且这些信息能够在用户下次访问时仍然存在，无需服务器端的支持进行持久化。 在HTML5中，Web Storage分为两种类型：localStorage和...
5. 数据存储：为了持久保存留言，可能会使用Cookie、LocalStorage或者更现代的Web Storage API来在用户的浏览器中存储数据。 6. 如果留言板需要服务器端的功能，如处理用户认证、防止重复留言等，还可能涉及到PHP、...
同时，理解CSS3的Flexbox或Grid布局系统，将有助于在自适应设计中实现更灵活的布局控制。此外，确保模板代码的语义化和结构化，对于提高可访问性和可维护性也是至关重要的。 总的来说，这套"特别漂亮的HTML5响应式...
同时，PHP支持数据库交互，可以连接MySQL等数据库，实现数据的存储和检索，为网站提供更复杂的功能，如用户注册、留言系统、在线表单等。 模板的文件名表明它是一个设计公司模板，可能包括以下部分：首页、关于我们...
在实际应用中，可能需要结合服务器端存储和验证，或者使用更安全的本地存储机制，如Web Storage（localStorage或sessionStorage）。 总结，"js-msgboard"项目展示了如何使用原生JavaScript编写一个简单的留言板功能...
Web Storage（包括localStorage和sessionStorage）则提供比传统cookie更大的存储空间。 【网站模板设计】 这款模板专为孩子游泳培训网站设计，可能包含以下关键元素： 1. **吸引人的首页**：通常包含大图轮播展示...
而Web Storage则可以存储用户交互信息，如表白留言，使得表白更个性化。 其次，HTML5的离线存储特性（App Cache或Service Worker）可以让表白网页在无网络连接时也能正常显示，增加了浪漫的持久性。此外，Web ...
NAS（Network Attached Storage）作为一种流行的存储方案，具备高容量、高效能、高可靠的特性，可以独立于服务器上网，并采用简化操作系统进行管理，从而降低了管理和设置的复杂度。 ##### 3.2 软件架构和技术选型 ...
3. **云存储**：考虑到日记数据的量可能很大，应用可能采用了云存储服务，如阿里云OSS、AWS S3或Google Cloud Storage，以实现数据的高效存储和快速访问。 4. **用户体验**：为了提升用户体验，应用可能集成了富...
5. **本地存储**：HTML5的Web Storage API允许网站在用户浏览器中存储数据，如用户偏好设置或购物车信息，提高了用户体验并减轻服务器负担。 6. **CSS3增强**：配合HTML5，CSS3提供了更多的样式控制，如过渡...
数据库设计是系统的重要组成部分，MySQL 提供了高效的数据存储和检索能力，其关系型数据库特性适合管理结构化数据。表设计应遵循规范化原则，以减少数据冗余和提高数据一致性。例如，用户表、楼盘表、投诉表、报修表...
压缩包中的`html5-astral`可能是一个基于HTML5的子模板，它可能专注于利用HTML5的新特性，如语义化标签（如、、），多媒体支持（音频、视频），离线存储（Application Cache），以及Web Workers和Web Storage等提升...
7. **Web存储**: HTML5的Web Storage（包括`localStorage`和`sessionStorage`）允许网站在本地存储数据，使得用户可以保存浏览状态，如已查看的婚纱照或设置的偏好。 8. **Web字体**: 使用`@font-face`规则，HTML5...
教学录像：22分钟 ... 1.3 HTML的基本结构 5 ... 1.3.2 文件开始标签<... 15.3.1 实现拖放的步骤 290 15.3.2 通过拖放显示欢迎信息 291 15.4 dataTransfer对象应用详解 293 15.4.1 使用effectAllowed...
此外，HTML5还支持本地存储（Web Storage）、离线存储（Application Cache）、拖放功能（Drag and Drop）以及媒体元素（如和），使得网页可以更好地处理多媒体内容，无需依赖Flash等外部插件。 自适应设计...
此外，它还支持离线存储（Web Storage）、拖放功能、媒体元素（如和）以及地理定位API等。 2. **响应式设计原理**：响应式设计基于媒体查询（Media Queries），通过定义不同断点来适应不同设备的屏幕尺寸。它可以...
它支持结构化查询语言（SQL），可用于数据的增删改查操作。对于小型企业网站来说，Access数据库足够满足需求，且易于集成到Asp应用程序中。 接下来，我们看看压缩包中的文件名，可以推测出系统的基本架构和功能： ...