Html5案例：本地存储的应用
来自CloudWiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5本地存储</title>
<style>
.weblist,.search,table{margin:20px auto;border: 2px dashed #ccc;width:320px;text-align:center;padding:20px;}
</style>
</head>
<body onload="loadAll()">
<div class="weblist">
<label for="sitename">站名：</label>
<input type="text" id="sitename" name="sitename" class="text"/><br/><br/>
<label for="siteurl">网址：</label>
<input type="text" id="siteurl" name="siteurl"/><br/><br/>
<input type="button" onclick="save()" value="新增记录"/>
</div>
<div class="search">
<label for="search_site">输入网站名：</label>
<input type="text" id="search_site" name="search_site"/><br/><br/>
<input type="button" onclick="find()" value="查找网站"/>
<p id="find_result"></p>
</div>
<div id="list"></div>
<script>
// 载入所有存储在localStorage的数据
loadAll();
//保存数据
function save()
{
var site = new Object;
site.sitename = document.getElementById("sitename").value;
site.siteurl = document.getElementById("siteurl").value;
var str = JSON.stringify(site); // 将对象转换为字符串
localStorage.setItem(site.sitename,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="网站名是：" + site.sitename + "，网址是：" + site.siteurl;
}
//将所有存储在localStorage中的对象提取出来，并展现到界面上
// 确保存储的 keyname 对应的值为转换对象，否则JSON.parse会报错
function loadAll()
{
var list = document.getElementById("list");
if(localStorage.length>0)
{
var result = "<table>";
result += "<tr><td>网站名</td><td>网址</td></tr>";
for(var i=0;i<localStorage.length;i++)
{
var sitename=localStorage.key(i);
var str=localStorage.getItem(sitename);
var site=JSON.parse(str);
result += "<tr><td>"+site.sitename+"</td><td><a href="+site.siteurl+">"+site.siteurl+"</a></td></tr>";
}
result += "</table>";
list.innerHTML = result;
}
else
{
list.innerHTML = "数据为空...";
}
}
</script>
</body>
</html>
