一 介绍
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>
三 运行结果
相关推荐
NULL 博文链接:https://yuruei2000.iteye.com/blog/1489088
软件名称:华硕网络存储:WebStorage APK名称:com.ecareme.asuswebstorage 最新版本:2.1.28.8207 支持ROM:2.2及更高版本 界面语言:简体中文 软件大小:10.23 M 软件简介: 全球超过三千万个注册用户;Google ...
我们平时大量接触的Word,Excel文件实际上都是结构化存储文件 用这个示例程序你也可以创建自己的结构化存储文件。 要使示例程序正常运行, 你还得下载Storage Interface TypeLib(23k)。 地址:...
一个功能比较完善的结构化存储C#类库,可以轻松完成结构化文档的创建和读取。 命名空间 using ExpertLib; using ExpertLib.IO; using ExpertLib.IO.Storage; 这里有一些我对它的研究~~ ...
直接使用 W3C WebStorage API 的任何实现作为 React/Flux 风格的存储。 var WebStorage = require ( 'react-webstorage' ) , dispatcher = require ( './path/to/app-dispatcher' ) ; var webStorage = new Web...
用于查看结构化存储文件,例如Word,Excel文档以及QQ消息文件等。
该库提供了易于使用的服务,可通过Angular应用程序管理Web存储(本地和会话)。 它还提供了两个装饰器来同步组件属性和Web存储。 指数: : : 从v2.x迁移到v3 将您的项目更新为Angular 7+ 通过...
网络存储本地 一个持久性插件为本地文件存储。 安装 $ npm install webstorage-local 用法 传递存储数据的目录名称。然后您可以将其添加到构造函数。 var webstorage = require ( 'webstorage' ) ; var local = ...
主要为大家详细介绍了HTML5本地存储之Web Storage的相关资料,Web Storage如何用JSON存储多个数据,感兴趣的小伙伴们可以参考一下
利用web Storage实现大数据的在线存储
华为HCIP-Storage V5.0存储培训教材和实验手册
HCNP-Storage_SSAM 第三章 SAN存储系统性能测试和调优 V1.0.ppt HCNP-Storage_SSAM 第二章 SAN可靠性 V1.0.ppt HCNP-Storage_SSAM 第五章 SAN存储系统故障诊断与排除 V1.1.pptx HCNP-Storage_SSAM 第八章 SAN...
Web Storage是HTML5引入的一个非常重要的功能,可以在客户端本地存储数据,类似HTML4的cookie,但可实现功能要比cookie强大的多,cookie大小被限制在4KB,Web Storage官方建议为每个网站5MB,感兴趣的朋友可以了解下
Modular Disk Storage Manager Client存储管理软件下载链接说明; dell power manager下载地址
您可以跨任何后端(例如内存数据库、本地文件系统、mongodb、redis 等)集成或重用 webstorage 接口。 默认情况下,webstorage 不持久化数据。 这意味着它将使用内存对象作为其后端。 var webstorage = require ...
suse storage存储部署手册中文版 suse storage存储部署手册中文版 suse storage存储部署手册中文版 suse storage存储部署手册中文版 suse storage存储部署手册中文版 suse storage存储部署手册中文版 suse storage...
html web storage 别人写的,共享下
HCIE-Storage华为存储精英实验手册完整汇总版 V2.0 V2.0 01 HCIE-Storage 2.0传统数据中心存储规划部署实验指导手册 V1.0.docx 02 HCIE-Storage 2.0 OceanStor 9000实验手册 V1.0.docx 03 HCIE-Storage 2.0备份解决...
华为FusionStorage 8.0对象存储Data Sheet.pdf
Web Storage.rar