HTML5中可以用json对象来存取一组相关的对象，以下是个例子，我们收集一组用户输入信息，然后创建一个Object来囊括这些信息，之后用一个json字符串来表示这个Object，然后把json字符串存放在localStorage中。
之后，我们让用户检索名称，用名称为key去问localStorage取得对应的json字符串，然后解析json字符串到Object对象，吧相关信息依次从这个Object对象中提取出来，然后构造HTML文本，最后输出在指定位置：
HTML代码：
- <!DOCTYPE html>
- <head>
- <meta charset="UTF-8">
- <title>HTML5 存取复杂数据到json对象DEMO</title>
- <script type="text/javascript" src="js/objectStorage.js"></script>
- </head>
-
- <body>
-
- <h3>使用HTML5存储复杂数据到json对象</h3>
-
- <h4>填写一组相关信息到表格中</h4>
- <table>
- <tr><td>姓名:</td><td><input type="text" id="name"></td></tr>
- <tr><td>邮箱地址:</td><td><input type="text" id="email"></td></tr>
- <tr><td>电话号码:</td><td><input type="text" id="phone"></td></tr>
- <tr><td></td><td><input type="button" value="保存" onclick="saveStorage();"></td></tr>
- </table>
-
- <hr>
- <h4> 这里将会获取已经存入localStorage的json对象，并且解析成原始信息并且展示</h4>
- <p>
- <input type="text" id="find">
- <input type="button" value="检索" onclick="findStorage('msg');">
- </p>
-
- <p id ="msg"></p>
- </body>
javascript包含2个函数，一个是存数据，一个是取数据：
-
-
-
-
-
-
-
- function saveStorage(){
-
-
- var data = new Object;
-
- data.name=document.getElementById("name").value;
- data.email=document.getElementById("email").value;
- data.phone=document.getElementById("phone").value;
-
- var str = JSON.stringify(data);
-
- localStorage.setItem(data.name,str);
- console.log("数据已经保存! 被保存的用户名为: "+data.name);
- }
-
-
- function findStorage(id){
-
- var requiredPersonName = document.getElementById("find").value;
-
- var str=localStorage.getItem(requiredPersonName);
-
- var data= JSON.parse(str);
-
- var result="姓名:"+data.name+'<br>';
- result+="电子邮箱:"+data.email+'<br>';
- result+="电话号码:"+data.phone+'<br>';
-
- var target = document.getElementById(id);
-
- target.innerHTML = result;
- }
演示：
刚开始，我们设法构造多组信息，然后依次存放到localStorage中，如图（从控制台我们可以看到，我们录入了4组数据）：
然后我们进行检索，比如我们输入“王帅哥”，那么和'王帅哥“相关的信息就会展示在下面：
本文转自 charles_wang888 51CTO博客，原文链接：http://blog.51cto.com/supercharles888/855204，如需转载请自行联系原作者