不知有没有同学跟我一样，浏览器中书签保存太久了，某一天重装系统后又忘了导出书签，导致几个月辛辛苦苦收藏的书签一下就付诸东流了。
可能也很同学说注册一个谷歌账号，但翻墙注册也很麻烦吧。
自己搞个书签网站放到服务器。。。代价也太大了，而且使用也很不方便，总不至于找个书签还要登录一下网站。
基于种种原因，我觉得写个html页面放在桌面上，把书签都保存在html页面里，用的时候直接点击就好了。
话不多说，直接上代码——
1. 新建一个html页面，内容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>书签管理器</title>
<style type="text/css">
*{margin: 0;padding: 0;box-sizing:border-box;font-size: 13px;}
html,body{width: 100%;height: 100%}
ul,
li {
list-style: none;
}
#container{
width: 100%;
height: 100%;
background-color: #b2c8bb;
display: flex;
flex-direction: column;
}
#container .header {
height: 60px;
background: #4e4949;
display: flex;
}
#container .header .header-left{
flex: 1;
}
#container .header .header-left .bks{
color: #fff;
margin-top: 25px;
margin-left: 20px;
}
#container .header .header-right{
flex: 5;
}
#container .header .header-right .search{
position: relative;
top: 10px;
left: 15%;
width: 50%;
height: 40px;
background: #313030;
border-radius: 4px;
padding: 8px 10px;
}
#container .header .header-right .search #placeholder{
display: block;
position: absolute;
top: 10px;
left: 12px;
color: #ddd;
font-size: 14px;
cursor: text;
}
#container .header .header-right .search .search-input{
width: 100%;
height: 100%;
background: transparent;
color: #fff;
font-size: 14px;
border: none;
outline: none;
}
#container .main{
flex: 1;
display:flex;
overflow:hidden;
}
#container .main .main-left{
flex:1;
}
#container .main .main-right{
flex:5;
overflow-y: scroll;
}
#container .main .main-right #dataList{
width: 60%;
position: relative;
top: 20px;
left: 15%;
margin-bottom: 40px;
}
#container .main .main-right #dataList .list-li {
width: 100%;
height: 42px;
line-height: 30px;
margin-bottom: 3px;
cursor: pointer;
border: 1px solid #fff;
padding: 5px 10px;
background-color: #fff;
border-radius: 4px;
overflow: hidden;
box-shadow: 5px 5px 10px #888;
-webkit-transition:all 0.15s;
-moz-transition:all 0.15s;
-o-transition:all 0.15s;
}
#container .main .main-right #dataList .list-li:hover {
-webkit-transform:scale(1.025);
-moz-transform:scale(1.025);
-o-transform:scale(1.025);
}
#container .main .main-right #dataList .list-li .icon {
position: relative;
top: 3px;
left: 0px;
}
#container .main .main-right #dataList .list-li .text {
margin-left: 5px;
}
</style>
<script type="text/javascript">
window.onload = function() {
// 获取数据源
var dataSource = document.getElementById("dataSource");
// 获取list容器
var dataList = document.getElementById("dataList");
dataList.innerHTML = "";
var list = dataSource.getElementsByTagName("A");
// 统计书签条数
document.getElementById("bk_sum").innerHTML = list.length;
// 循环插入数据
for(var i = 0; i < list.length; i++) {
var data = list[i];
var li = createLi(data.href,data.getAttribute("ICON"),data.innerHTML);
dataList.appendChild(li);
}
}
// 搜索内容
var timer = null;
function searchValue(){
var searchText = document.getElementById("searchInput").value;
// 删除placeholder
var placeholder = document.getElementById("placeholder");
if(searchText.length > 0){
placeholder.style.display="none";
}else{
placeholder.style.display="block"
}
// 判断输入值是否是空格，若是，则返回
if(searchText.length > 0 && searchText.replace(/(^\s*)|(\s*$)/g, "") == "" ){
return;
}
// 延迟搜索
clearTimeout(timer);
timer = setTimeout(function(){
updateDataList();
clearTimeout(timer);
},300);
}
// 更新书签列表方法
function updateDataList(){
var searchText = document.getElementById("searchInput").value.replace(/(^\s*)|(\s*$)/g, "");
// 获取资源库
var dataSource = document.getElementById("dataSource");
var list = dataSource.getElementsByTagName("A");
// 初始化一个空数组来存放搜索到的数据
var arr = new Array();
for(var i=0;i<list.length;i++){
var data = list[i];
if(data.innerHTML.toLowerCase().indexOf(searchText) > -1){
arr.push(data);
}
}
// 清空列表，装载搜索到的数据
var dataList = document.getElementById("dataList");
dataList.innerHTML = "";
for(var i=0;i<arr.length;i++){
var data = arr[i];
var li = createLi(data.href,data.getAttribute("ICON"),data.innerHTML);
dataList.appendChild(li);
}
}
// 创建LI标签
function createLi(url,icon,text){
// 创建li标签
var li = document.createElement("li");
li.className = "list-li";
// 给li绑定点击事件
li.addEventListener("click",function(){
window.open(url);
});
// 创建img标签
var img = document.createElement("img");
img.src = icon;
img.className = "icon";
// 创建span标签
var span = document.createElement("span");
span.innerHTML = text;
span.className = "text";
// 追加节点
li.appendChild(img);
li.appendChild(span);
return li;
}
</script>
</head>
<body>
<div id="container">
<div class="header">
<div class="header-left">
<div class="bks">已收藏书签：<span id="bk_sum"></span></div>
</div>
<div class="header-right">
<div class="search">
<label id="placeholder" for="searchInput">搜索书签</label>
<input type="text" name="search-input" class="search-input" id="searchInput" oninput="searchValue()" />
</div>
</div>
</div>
<div class="main">
<div class="main-left">
</div>
<div class="main-right">
<!-- 书签列表 -->
<ul id="dataList"></ul>
</div>
</div>
</div>
<!-- 添加书签步骤： -->
<!-- 1.导出浏览器书签到html文件 -->
<!-- 2.将hmtl文件中的<DT><A>...</A>标签复制到<DL></DL>中保存 -->
<DL id="dataSource" style="display: none;">
<DT><A HREF="https://www.baidu.com/" ADD_DATE="1520819346" ICON="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAACP0lEQVQ4jVWSS0jUYRTFf983M5qmMw4+UYsS0zAKKjdimkHgogcRNIGryijJRZs2UW1sWRIJQZBBbazcRGZCZA9FKoOCGlTMkbSHOj4QZ3TGceb/3RbzN+iuLpfDPffcc5QxIoLWGAFBa5JljN2LIIJS9lwrhVLIOvrhR5oe8XMRrQnM8uwrRlAKsfE4kwssg9KMTtP6mpklcjNo3s+5DoamuVzPxQM2iQj2BS4nTs1MCCMUeFiK0DvCr0WKvfSOEk+AILLOoBQPPhCNU19BVhr+KXYW4U5jeY3IGg2VpLhsVUrhVIr+MVp6iMQRaDvBQICz1awlOL+PNCfVJVzvoaaUujIsgxKRO320vSMjlfJ8Ok4DDE2RvZECD4Cvnb4xCj10NlKahxahLI9Ygt+LVBQgwoXH+O5z9C4v/FiGYJiSHKIJxudRCqcIB7dz4xjzKzTVcPstL4fJcxOJcaWLLTmU5tL1jUIPW7MRQf0zDmjt5epzWg4TXePee7zpZKbScoRgiOIsardhDMoyghBLcOkpgVlOVbG7mL7vjAQZnOTQDgYnuHmc8nwSFg6NNoLWdH6h20+bj1cjfJokz01dGaEoDZWEVvG1M7GAQyeNE0Tw/8G9gRQHc2EcihQH3nR2FWEZMlMJxxieRilM0mml2LOZqSWuddNYTU4GTz4zMM6ZKgLzzC2jFUVZICiFMkaA1Ti33tAfwOXAm84mLysxfiwQDJPi4ORemmvtFP73JcsAONYTblksRnFpPOl2kIC/BsEA9PPta4oAAAAASUVORK5CYII=">百度一下，你就知道</A>
</DL>
</body>
</html>