Linux教程網 >> Linux編程 >> Linux編程 >> HTML5 利用json對象來存取復雜數據

HTML5 利用json對象來存取復雜數據

日期：2017/3/1 10:23:17 编辑：Linux編程

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個函數，一個是存數據，一個是取數據：

/** 
 *  This file is confidential by Charles.Wang 
 *  Copyright belongs to Charles.wang 
 *  You can make contact with Charles.Wang ([email protected]) 
 */ 
  
 //存一組關聯數據到json對象，再把json對象存放到localStorage中 
 function saveStorage(){ 
     
    //創建一個js對象，用於存放當前從表單獲得的數據 
    var data = new Object; 
    //吧這對象的屬性名依次和從用戶輸入的屬性值關聯起來 
    data.name=document.getElementById("name").value; 
    data.email=document.getElementById("email").value; 
    data.phone=document.getElementById("phone").value; 
    //創建一個json對象，讓其對應剛才創建的對象的字符串數據形式 
    var str = JSON.stringify(data); 
    //吧json對象存放到localStorage上，key為用戶輸入的用戶名，value為這個json字符串 
    localStorage.setItem(data.name,str); 
    console.log("數據已經保存! 被保存的用戶名為: "+data.name); 
 } 
  
 //從localStorage按照用戶輸入的檢索名稱為key，得到對應的json字符串，然後把json字符串解析為一組信息， 並且打印到指定位置 
 function findStorage(id){ 
    //獲得用戶的輸入，是用戶希望檢索的名字 
    var requiredPersonName = document.getElementById("find").value; 
    //以這個檢索的名字為key,來查找localStorage,得到了json字符串 
    var str=localStorage.getItem(requiredPersonName); 
    //解析這個json字符串得到Object對象 
    var data= JSON.parse(str); 
    //從Object對象中分離出相關屬性值，然後構造要輸出的HTML內容 
    var result="姓名:"+data.name+'<br>'; 
    result+="電子郵箱:"+data.email+'<br>'; 
    result+="電話號碼:"+data.phone+'<br>'; 
    //取得頁面上要輸出的容器 
    var target = document.getElementById(id); 
    //用剛才創建的HTML內容來填充這個容器 
    target.innerHTML = result; 
 }