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