您的位置：首页 > Web前端 > HTML5

利用HTML5的本地存储制作的个性化导航页

2016-10-18 12:42 921 查看

本人做了一个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 本地存储存储导航导航页

相关文章推荐

新的分享

章节导航