HTML5利用json对象来存取复杂数据

HTML5中可以用json对象来存取一组相关的对象，以下是个例子，我们收集一组用户输入信息，然后创建一个Object来囊括这些信息，之后用一个json字符串来表示这个Object，然后把json字符串存放在localStorage中。
之后，我们让用户检索名称，用名称为key去问localStorage取得对应的json字符串，然后解析json字符串到Object对象，吧相关信息依次从这个Object对象中提取出来，然后构造HTML文本，最后输出在指定位置：
 
HTML代码：
 
1. !DOCTYPE html>
2. head>
3. meta charset="UTF-8">
4. tITle> HTML5 存取复杂数据到json对象DEMO/title>
5. script type="text/javascript" src="js/objectStorage.js"> /script>
6. /head>
7. 
8. body>
9. 
10. h3> 使用HTML5存储复杂数据到json对象/h3>
11. 
12. h4> 填写一组相关信息到表格中/h4>
13. table>
14.     tr> td> 姓名:/td> td> input type="text" id="name"> /td> /tr>
15.     tr> td> 邮箱地址:/td> td> input type="text" id="email"> /td> /tr>
16.     tr> td> 电话号码:/td> td> input type="text" id="phone"> /td> /tr>
17.     tr> td> /td> td> input type="button" value="保存" onclick="saveStorage(); "> /td> /tr>
18. /table>
19. 
20. hr>
21. h4> 这里将会获取已经存入localStorage的json对象，并且解析成原始信息并且展示/h4>
22. p>
23. input type="text" id="find">
24. input type="button" value="检索" onclick="findStorage('msg'); ">
25. /p>
26. !-- 下面这块用于显示被检索到的信息文本 -->
27. p id ="msg"> /p>
28. /body>
javascript包含2个函数，一个是存数据，一个是取数据：
1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang (charles_wang888@126.COM)
5.  */
6.  
7.  //存一组关联数据到json对象，再把json对象存放到localStorage中
8.  function saveStorage(){
9.     
10.     //创建一个js对象，用于存放当前从表单获得的数据
11.     VAR data = new Object;
12.     //吧这对象的属性名依次和从用户输入的属性值关联起来
13.     data.name=document.getElementById("name").value;
14.     data.email=document.getElementById("email").value;
15.     data.phone=document.getElementById("phone").value;
16.     //创建一个json对象，让其对应刚才创建的对象的字符串数据形式
17.     var str = JSON.stringify(data);
18.     //吧json对象存放到localStorage上，key为用户输入的用户名，value为这个json字符串
19.     localStorage.setItem(data.name,str);
20.     console.LOG("数据已经保存! 被保存的用户名为: "+data.name);
21.  }
22.  
23.  //从localStorage按照用户输入的检索名称为key，得到对应的json字符串，然后把json字符串解析为一组信息， 并且打印到指定位置
24.  function findStorage(id){
25.     //获得用户的输入，是用户希望检索的名字
26.     var requiredPersonName = document.getElementById("find").value;
27.     //以这个检索的名字为key,来查找localStorage,得到了json字符串
28.     var str=localStorage.getItem(requiredPersonName);
29.     //解析这个json字符串得到Object对象
30.     var data= JSON.parse(str);
31.     //从Object对象中分离出相关属性值，然后构造要输出的HTML内容
32.     var result="姓名:"+data.name+'br> ';
33.     result+="电子邮箱:"+data.email+'br> ';
34.     result+="电话号码:"+data.phone+'br> ';
35.     //取得页面上要输出的容器
36.     var target = document.getElementById(id);
37.     //用刚才创建的HTML内容来填充这个容器
38.     target.innerHTML = result;
39.  }
 
演示：

  刚开始，我们设法构造多组信息，然后依次存放到localStorage中，如图（从控制台我们可以看到，我们录入了4组数据）：

HTML5中可以用json对象来存取一组相关的对象，以下是个例子，我们收集一组用户输入信息，然后创建一个Object来囊括这些信息，之后用一个json字符串来表示这个Object，然后把json字符串存放在localStorage中。
之后，我们让用户检索名称，用名称为key去问localStorage取得对应的json字符串，然后解析json字符串到Object对象，吧相关信息依次从这个Object对象中提取出来，然后构造HTML文本，最后输出在指定位置：
 
HTML代码：
 
1. !DOCTYPE html>
2. head>
3. meta charset="UTF-8">
4. title> HTML5 存取复杂数据到json对象DEMO/title>
5. script type="text/javascript" src="js/objectStorage.js"> /script>
6. /head>
7. 
8. body>
9. 
10. h3> 使用HTML5存储复杂数据到json对象/h3>
11. 
12. h4> 填写一组相关信息到表格中/h4>
13. table>
14.     tr> td> 姓名:/td> td> input type="text" id="name"> /td> /tr>
15.     tr> td> 邮箱地址:/td> td> input type="text" id="email"> /td> /tr>
16.     tr> td> 电话号码:/td> td> input type="text" id="phone"> /td> /tr>
17.     tr> td> /td> td> input type="button" value="保存" onclick="saveStorage(); "> /td> /tr>
18. /table>
19. 
20. hr>
21. h4> 这里将会获取已经存入localStorage的json对象，并且解析成原始信息并且展示/h4>
22. p>
23. input type="text" id="find">
24. input type="button" value="检索" onclick="findStorage('msg'); ">
25. /p>
26. !-- 下面这块用于显示被检索到的信息文本 -->
27. p id ="msg"> /p>
28. /body>
javascript包含2个函数，一个是存数据，一个是取数据：
1. /**
2.  *  This file is confidential by Charles.Wang
3.  *  Copyright belongs to Charles.wang
4.  *  You can make contact with Charles.Wang (charles_wang888@126.com)
5.  */
6.  
7.  //存一组关联数据到json对象，再把json对象存放到localStorage中
8.  function saveStorage(){
9.     
10.     //创建一个js对象，用于存放当前从表单获得的数据
11.     var data = new Object;
12.     //吧这对象的属性名依次和从用户输入的属性值关联起来
13.     data.name=document.getElementById("name").value;
14.     data.email=document.getElementById("email").value;
15.     data.phone=document.getElementById("phone").value;
16.     //创建一个json对象，让其对应刚才创建的对象的字符串数据形式
17.     var str = JSON.stringify(data);
18.     //吧json对象存放到localStorage上，key为用户输入的用户名，value为这个json字符串
19.     localStorage.setItem(data.name,str);
20.     console.log("数据已经保存! 被保存的用户名为: "+data.name);
21.  }
22.  
23.  //从localStorage按照用户输入的检索名称为key，得到对应的json字符串，然后把json字符串解析为一组信息， 并且打印到指定位置
24.  function findStorage(id){
25.     //获得用户的输入，是用户希望检索的名字
26.     var requiredPersonName = document.getElementById("find").value;
27.     //以这个检索的名字为key,来查找localStorage,得到了json字符串
28.     var str=localStorage.getItem(requiredPersonName);
29.     //解析这个json字符串得到Object对象
30.     var data= JSON.parse(str);
31.     //从Object对象中分离出相关属性值，然后构造要输出的HTML内容
32.     var result="姓名:"+data.name+'br> ';
33.     result+="电子邮箱:"+data.email+'br> ';
34.     result+="电话号码:"+data.phone+'br> ';
35.     //取得页面上要输出的容器
36.     var target = document.getElementById(id);
37.     //用刚才创建的HTML内容来填充这个容器
38.     target.innerHTML = result;
39.  }
 
演示：

  刚开始，我们设法构造多组信息，然后依次存放到localStorage中，如图（从控制台我们可以看到，我们录入了4组数据）：

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！