H5中使用Web Storage来存储结构化数据

在上一篇对Web Storage的介绍中，可以看到，使用Storage保存key—value对时，key、value只能是字符串，这对于简单的数据来说已经够了，但是如果需要保存更复杂的数据，比如保存类似于表记录的数据，那该怎么办呢？

下面提供一种解决方式，

按如下步骤来存储结构化的数据

1）把结构化数据封装成JSON对象

2）把JSON对象转化为字符串再进行保存

按如下步骤来读取结构化的数据

1）读取JSON格式的字符串

2）把JSON格式的字符串转化为JSON对象

3）通过JSON对象的属性来提取数据

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></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: 550px;"><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 = value;row.insertCell(1).innerHTML = datestr;}}var addMsg = function(){var titleElement = document.getElementById("title").value;var contentElement = document.getElementById("content").value;var userElement = document.getElementById("user").value;//将留言标题、留言内容、留言用户封装成对象var msg={title:titleElement,content:contentElement,user:userElement}var time = new Date().getTime();//以当前时间为key来保存留言信息
              localStorage.setItem(time,JSON.stringify(msg));titleElement.value = "";content.value = "";userElement.value = "";alert("保存数据");loadMsg();}function clearMsg(){localStorage.clear();alert("全部留言信息已被清除");loadMsg();}window.onload = loadMsg();</script></body>
</html>

上面代码中加粗的代码就是保存结构化数据的关键代码。

转载于:https://www.cnblogs.com/sMKing/p/5976346.html

H5中使用Web Storage来存储结构化数据相关推荐

按一行一行的方法将一个文本文件复制到另一个文件中_大文件上的结构化数据计算示例...
[摘要] 本文分析大文件计算的实现原理,如过滤.聚合计算.添加计算列.排序.分组聚合.topN 等,以及利用并行计算来提高计算速度,并用 esProc SPL 举例说明如何用简洁的脚本实现大文件计算. ...
非结构化数据的存储与查询
当今信息化时代充斥着大量的数据.海量数据存储是一个必然的趋势.然而数据如何的存储和查询,尤其是当今非结构化数据的快速增长,对其数据的存储,处理,查询.使得如今的关系数据库存储带来了巨大的挑战.分布存 ...
技术20期：结构化数据与非结构化数据：有什么区别？
查看结构化和非结构化数据.它们的主要区别以及哪种形式最能满足您的业务需求. 并非所有数据都是平等的.有些数据是结构化的,但大部分是非结构化的.结构化和非结构化数据以不同的方式获取.收集和扩展,并且每一 ...
谷歌三大论文中文版之一：Bigtable：一个分布式的结构化数据存储系统
修正了alex翻译版的几个欠妥之处 Bigtable:一个分布式的结构化数据存储系统摘要 Bigtable是一个管理结构化数据的分布式存储系统,它被设计用来处理海量数据:分布在数千台通用服务器上的P ...
非结构化数据的相关知识
一.出现原因信息社会化时代,各行各业在处理相关业务的过程中,都累计了海量的数据信息,随着IT应用的普及和发展,传统的纸质资料存储方式在不断缩减,更多的采用电子信息的存储方式存放在计算机中.这些信息数 ...
python爬虫工程师成长之路六(二) 非结构化数据之lxml库
文章目录 lxml库介绍 lxml库使用最后 lxml库介绍 lxml是一个使用python编写的库,处理XML非常方便,另外还支持XPath,(上篇博客的XPath派上用处了XPath 基础 ...
知识抽取学习笔记：面向非结构化数据的抽取
1概念知识抽取,即从不同来源.不同结构的数据中进行知识提取,形成知识(结构化数据)存入到知识图谱.大体的任务分类与对应技术如下图所示: 2知识抽取的技术与难点从结构化数据库中获取知识:D2R 难点 ...
【艺赛旗RPA流程开发课堂】如何使用结构化数据拾取
了解RPA: www.i-search.com.cn 学习流程挖掘 https://www.i-search.com.cn/product/rpm/ 本篇文章主要给大家介绍iS-RPA设计器中组合型功 ...
SEO基础：什么是结构化数据？
您可能听说过结构化数据,Schema.org和JSON-LD.但这些术语到底意味着什么呢?什么是结构化数据?结构化数据有什么作用?它与SEO有什么关系?对于那些不知道结构化数据是什么的人:这篇文章将告 ...

H5中使用Web Storage来存储结构化数据

H5中使用Web Storage来存储结构化数据相关推荐

最新文章

热门文章