在上一篇对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>

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

H5中使用Web Storage来存储结构化数据的更多相关文章

  1. H5新增的Web Storage本地存储

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage. sessionStorage用于本地存储一个会话(session)中的数据,这些数据只 ...

  2. 利用Gson和SharePreference存储结构化数据

    问题的导入 Android互联网产品通常会有很多的结构化数据需要保存,比如对于登录这个流程,通常会保存诸如username.profile_pic.access_token等等之类的数据,这些数据可以 ...

  3. 使用json存储结构化数据

    从文件中读写字符串很容易.数值就要多费点儿周折,因为read ()方法只会返回字符串,应将其传入int()这样的函数,就可以将'123'这样的字符串转换为对应的数值 123.当你想要保存更为复杂的数据 ...

  4. WEB 面向开发者的结构化数据

    通常用于google搜索 See also: video 探索搜索库

  5. Bigtable:一个分布式的结构化数据存储系统

    Bigtable:一个分布式的结构化数据存储系统 摘要 Bigtable是一个管理结构化数据的分布式存储系统,它被设计用来处理海量数据:分布在数千台通用服务器上的PB级的数据.Google的很多项目将 ...

  6. H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  7. 解析H5本地储存Web Storage

    一.本地存储由来的背景 由于HTML4时代Cookie的大小.格式.存储数据格式等限制,网站应用如果想在浏览器端存储用户的部分信息,那么只能借助于Cookie.但是Cookie的这些限制,也就导致了C ...

  8. html5中的Web Storage

    html5中的Web Storage包括了两种存储方式:sessionStorage和localStorage.sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有 ...

  9. MySQL 5.7:非结构化数据存储的新选择

    本文转载自:http://www.innomysql.net/article/23959.html (只作转载, 不代表本站和博主同意文中观点或证实文中信息) 工作10余年,没有一个版本能像MySQL ...

随机推荐

  1. 5for Java

    ① 从字符串“耿丹计算机Java20170320”中提取日期 public class Xx1 { /** * @param args */ public static void main(Strin ...

  2. document.querySelector()和document.querySelectorAll()

    HTML5向Web API新引入了 document.querySelector()和document.querySelectorAll()两个方法,都可以接收三种类型的参数:id(#),class( ...

  3. 获取JavaScript对象的方法

    写定义一个对象,如var a = new Array(),debugger,然后执行F12控制台的开发者模式下,进入断点,断点里面 会显示所有的方法的. var a = new Array(); de ...

  4. Nginx代理实现跨域

    #user nobody; worker_processes 1; #error_log logs/error.log; #error_log logs/error.log notice; #erro ...

  5. 【bzoj1951】[Sdoi2010]古代猪文 费马小定理+Lucas定理+中国剩余定理

    题目描述 求  $g^{\sum\limits_{k|n}C_{n}^{\frac nk}}\mod 999911659$ 输入 有且仅有一行:两个数N.G,用一个空格分开. 输出 有且仅有一行:一个 ...

  6. BZOJ4318 OSU!(动态规划+概率期望)

    设f[i][0/1]为考虑前i位,第i位为0/1时的期望得分(乘以是0/1的概率).暴力转移显然.前缀和优化即可. 但是这个前缀和精度无法承受,动不动就nan. 考虑增加一位的贡献.若之前后缀1的个数 ...

  7. arc068 E: Snuke Line

    首先要知道 (m/1 + m/2 + ... + m/m) 约为 mlogm 还有一个比较明显的结论,如果一个纪念品区间长度大于d,那么如果列车的停车间隔小于等于d,则这个纪念品一定能被买到 然后把区 ...

  8. 【题解】ZJOI2013蚂蚁寻路

    这题强呀……打了10+30暴力之后苦想1h并不会做……于是去看题解.看题解的时候又莫名各种看错,结果看了好久才懂……记录一下血泪史吧. 这题不难发现走出来的图形就是一个高低高低的城堡型图案,命名为高峰 ...

  9. [CF45G]Prime Problem

    题目大意:将$1$到$n(1<n\leqslant6000)$分成若干组数,要求每组数的和均为质数,若存在一种分配方式,输出每个数所在的组的编号,有多组解输出任意一组解,若不存在,输出$-1$ ...

  10. # centos7下FFmpeg环境部署记录

    # centos7下FFmpeg环境部署记录 随着视频在网站上的应用越来越多,越来越多的网站服务器需要支持视频转码,视频压缩,FFmpeg是目前最好用的网站服务器后台转码程序,应用最多.FFmpeg是 ...