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;
- }
演示：
剛開始，我們設法構造多組信息，然後依次存放到localStorage中，如圖（從控制台我們可以看到，我們錄入了4組數據）：
650) this.width=650;" border=0>
然後我們進行檢索，比如我們輸入“王帥哥”，那麼和'王帥哥“相關的信息就會展示在下面：
650) this.width=650;" border=0>