console
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('保存成功');
ii
}
function find() {
var search_site = document.getElementById('search_site').value;
var result = localStorage.getItem(search_site);
var find_result = document.getElementById('find_redult');
var site = JSON.parse(result);
find_result.innerHTML = search_site + '的网站名是：' + site.sitename + ',网址是：' + site.siteurl;
}
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 = "数据为空...";
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Document
</title>
</head>
<body>
<div id='demo' style='border:2px dashed gray;'>
<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' />
<label for="siteurl">
网址：
</label>
<input type="text" id='siteurl' name='siteurl' />
<br />
<input type="button" value="新增记录" onclick='save()' />
<hr />
<label for="search">
输入别名（key）：
</label>
<input type="text" id='search_site' name='search_site' />
<input type="button" onclick='find()' value='查找网站' />
<p id='find_result'>
</p>
</div>
</body>
</html>