生活随笔
收集整理的這篇文章主要介紹了
利用HTML5的本地存储制作的个性化导航页
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本人做了一個HTML5頁面，用于管理自己經常訪問的網站。
數據使用HTML5的localStorage存儲。下面是完整的頁面代碼。
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
a{margin:15px;font-size:28px;}
</style>
<script type="text/javascript">
function pageLoad()
{
for(var i=0; i<localStorage.length; i++)
{
var strKey = localStorage.key(i);
var strValue = localStorage.getItem(strKey);
addLink(strValue,strKey)
}
}
function clickButton()
{
var navcContent = document.getElementById('navcContent');
var inputUrl = document.getElementById('inputUrl').value;
var inputTips = document.getElementById('inputTips').value;
addLink(inputUrl,inputTips)
window.localStorage.setItem(inputTips,inputUrl)
}
function addLink(url,tips)
{
var fdStart = url.indexOf("http://");
var fdsStart = url.indexOf("https://");
if(fdStart == -1 && fdsStart==-1)
{
url ="http://" + url
}
var navcContent = document.getElementById('navcContent');
var href = document.createElement("a");
href.setAttribute("href", url);
href.setAttribute("target", "_blank");
href.innerHTML = tips;
navcContent.appendChild(href);
}
</script>
<link rel="shortcut icon" href="myicon.ico">
</head>
<body onLoad="pageLoad();"><h1>My Navigate Page！！！！！
</h1>
<p>鏈接:
<input type="text" id="inputUrl" style="width:250px"/> 名稱:
<input type="text" id="inputTips"/> <input type="button" value="新增" onclick="clickButton();"></p>
<div id="navcContent">
<a href="http://fanyi.baidu.com/translate?aldtype=16047&query=&keyfrom=baidu&smartresult=dict&lang=auto2zh#auto/zh/" target="_blank">百度翻譯
</a>
<a href="http://www.entts.com/" target="_blank">英文朗讀
</a>
<a href="https://git.oschina.net/login" target="_blank">碼云
</a>
<a href="http://www.erlang.org/downloads" target="_blank">erlang
</a>
<a href="http://www.w3school.com.cn/index.html" target="_blank">w3school
</a>
</div>
</body>
</html>
頁面的運行效果如下圖所示。
總結
以上是生活随笔為你收集整理的利用HTML5的本地存储制作的个性化导航页的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
