在上一篇对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>
上面代码中加粗的代码就是保存结构化数据的关键代码。