效果如下：
代码：
<!DOCTYPE HTML>
<html>
<head>
<title>Navigator</title>
<meta charset="utf-8" />
<style type="text/css">
body{
font-family: "Microsoft YaHei";
margin: 0px;
padding: 0px;
}
#title{
text-align: center;
background-color: rgba(0,153,255,.7);
padding-top: 20px;
padding-bottom: 20px;
}
h1, h4{
margin: 0px;
color: white;
}
a{
text-decoration: none;
}
.bar{
margin:8px;
padding: 5px;
}
input[type="button"]{
border:1px solid #aaa;
background-color: rgba(0,111,255,.8);
border-radius: 3px;
}
button{
border-radius: 3px;
}
#footer, #footer-show{
position: fixed;
bottom: 0px;
text-align: right;
background-color: rgba(0,153,255,.4);
}
#footer{
width: 100%;
display:inline;
}
#footer-show{
right: 0px;
display: none;
}
.add{
text-indent: 1em;
}
</style>
<script type="text/javascript">
var websites = [{
"index": "0",
"name": "百度",
"site": "http://www.baidu.com",
"describe": "搜索"
}, {
"index": "1",
"name": "163邮箱",
"site": "http://mail.163.com",
"describe": "工作"
}, {
"index": "2",
"name": "人人",
"site": "http://www.renren.com",
"describe": "社交"
}];
function fill(i) {
if(localStorage.getItem(localStorage.key(i)) == "undefined") return;
var value = eval('(' + localStorage.getItem(localStorage.key(i)) + ')');
var drop = document.createElement("button");
drop.setAttribute("onclick", "drop(this);");
drop.setAttribute("id", value.index);
drop.innerHTML = "-";
var newa = document.createElement("a");
newa.target = "_blank";
newa.href = value.site;
newa.innerHTML = value.name;
if (value.describe != "") var describe = document.createTextNode(" (" + value.describe + ")");
else var describe = document.createTextNode("");
var bar = document.createElement("div");
bar.setAttribute("class", "bar");
var website = document.getElementById("websites");
bar.appendChild(drop);
bar.appendChild(newa);
bar.appendChild(describe);
website.appendChild(bar);
}
function drop(object) {
object.parentNode.parentNode.removeChild(object.parentNode);
localStorage.removeItem("website" + object.getAttribute("id"));
window.location.reload();
}
function add() {
var index = localStorage.length;
localStorage.setItem("website" + index, "{\"index\":\"" + index + "\", \"name\":\"" + document.getElementById("name").value + "\", \"site\":\"" + document.getElementById("site").value + "\", \"describe\":\"" + document.getElementById("describe").value + "\"}");
init();
window.location.reload();
}
function clear() {
var web = document.getElementById("websites");
while (web.firstChild)
web.removeChild(web.firstChild);
}
function clearAll(){
clear();
localStorage.clear();
window.location.reload();
}
function addInit() {
clear();
for (var i = 0; i < websites.length; i++)
localStorage.setItem("website" + i, JSON.stringify(websites[i]));
window.location.reload();
}
function init() {
clear();
for (var i = 0; i < localStorage.length; i++) {
fill(i);
}
}
function hide(){
document.getElementById("footer").style.display = "none";
document.getElementById("footer-show").style.display = "inline";
}
function show(){
document.getElementById("footer-show").style.display = "none";
document.getElementById("footer").style.display = "inline";
}
</script>
</head>
<body onload="init();">
<div id="title"><h1>个 人 网 站 导 航</h1></div>
<div id="websites"></div>
<div>添加：</div>
<div>网站名称：<input type="text" id="name" /> 网站地址：<input type="text" id="site" value="http://" /> 网站备注：<input type="text" id="describe" />
<button onclick="add();" style="width:60px">+</button>
<input type="button" value="初始化" onclick="addInit();" />
<input type="button" value="清除所有" onclick="clearAll();" />
</div><br />
<div id="footer">
<h4>
<div style="position:fixed; text-aligh:left">
Powered by <a href="http://www.renren.com/414929313" target="_blank">karezi</a>
</div>
<div id="hide" style="position:float; text-align:right;" onclick="hide();">
<a href="#" onclick="hide();">hide</a>
</div>
</h4>
</div>
<div id="footer-show"><a id="show" href="#" onclick="show();"><strong>show</strong></a></div>
</body>
</html>
复制到记事本中保存为html格式，用chrome打开，IE不支持localstorage本地存储= =。
昨天说的希望做个学校网站导航的玩意儿，方便管理，昨天用一个晚上实现了，当然初始化网址改掉了，不是学校的那些网址了，自己填删即可。
用到了html5 LocalStorage本地存储和JSON，因为想用一个文件就实现，所以没用jQuery和很多的UI美化。
当然，这样的话，UI简直不忍直视，果然自己不是搞设计的。。。
算是自己做着玩得吧~