源代碼
點擊運行
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>HTML5本地存儲之Web Storage篇</title> </head> <body> <div style="border: 2px dashed #ccc;width:320px;text-align:center;"> <label for="keyname">別名(key):</label> <input type="text" id="keyname" name="keyname" class="text"/> <br/> <label for="sitename">網站名:</label> <input type="text" id="sitename" name="sitename" class="text"/> <br/> <label for="siteurl">網 址:</label> <input type="text" id="siteurl" name="siteurl"/> <br/> <input type="button" onclick="save()" value="新增記錄"/> <hr/> <label for="search_phone">輸入別名(key):</label> <input type="text" id="search_site" name="search_site"/> <input type="button" onclick="find()" value="查找網站"/> <p id="find_result"><br/></p> </div> <br/> <div id="list"> </div> <script> //保存數據 function save(){ var site = new Object; site.keyname = document.getElementById("keyname").value; site.sitename = document.getElementById("sitename").value; site.siteurl = document.getElementById("siteurl").value; var str = JSON.stringify(site); // 將對象轉換為字符串 localStorage.setItem(site.keyname,str); alert("保存成功"); } //查找數據 function find(){ var search_site = document.getElementById("search_site").value; var str = localStorage.getItem(search_site); var find_result = document.getElementById("find_result"); var site = JSON.parse(str); find_result.innerHTML = search_site + "的網站名是:" + site.sitename + ",網址是:" + site.siteurl; } //將所有存儲在localStorage中的對象提取出來,併展現到界面上 // 確保存儲的 keyname 對應的值為轉換對象,否則JSON.parse會報錯 function loadAll(){ var list = document.getElementById("list"); if(localStorage.length>0){ var result = "<table border='1'>"; result += "<tr><td>別名</td><td>網站名</td><td>網址</td></tr>"; for(var i=0;i<localStorage.length;i++){ var keyname = localStorage.key(i); var str = localStorage.getItem(keyname); var site = JSON.parse(str); result += "<tr><td>"+site.keyname+"</td><td>"+site.sitename+"</td><td>"+site.siteurl+"</td></tr>"; } result += "</table>"; list.innerHTML = result; }else{ list.innerHTML = "數據為空..."; } } </script> </body> </html>
運行結果