基于localStorage的网址收藏夹

海天鹰
已于 2024-03-25 18:52:43 修改
阅读量101
点赞数 3
分类专栏： JS 文章标签： javascript
于 2024-03-17 12:46:00 首次发布
本文链接：https://blog.csdn.net/sonichty/article/details/136780216
版权
JS 专栏收录该内容
58 篇文章 1 订阅
订阅专栏
可以做桌面浏览器主页，解决一些兼容问题后，可以做移动端浏览器的主页。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>主页</title>
</head>
<style>
div { user-select:none; }
a { text-decoration:none; }
span { display:inline-block; margin:5px; }
a, img { -webkit-user-drag:none; }
img { vertical-align:middle; }
.operation { color:white; }
.operation:hover { cursor:hand; color:black; }
.menu { position:absolute; background:white; border:1px solid gray; width:100px; display:none; }
.menu div:hover { background:#ddd; }
#list a { margin:10px; width:50px; height:75px; display:inline-block; text-align:center; white-space:nowrap; overflow:hidden; color:black; }
#list button { width:50px; height:50px; font-size:40px; }
</style>
<body>
<center><img src="logo.png"></center>
<div align="center">
<select id="search_engine">
<option value="https://www.baidu.com/s?wd=%s">百度</option>
<option value="https://cn.bing.com/search?q=%s">必应</option>
<option value="https://www.sogou.com/tx?query=%s">搜搜</option>
<option value="https://www.so.com/s?q=%s">360搜索</option>
</select> 
<input type="text" id="text_search"> 
<button id="button_search">搜索</button>
</div>
<div id="list"></div>
<div id="menu" class="menu"><div id="menu_modify">修改</div><div id="menu_delete">删除</div></div>
<dialog id="dialog">
<h2 align="center" id="type"></h2>
<input type="text" id="title" placeholder="标题" value=""><p>
<input type="text" id="website" placeholder="https://" value=""><p>
<center><button id="button_confirm">确定</button> <button id="button_cancel">取消</button></center>
</dialog>
<script>
var json, id, timer, title1, website1, type1;
if (!localStorage.webfav)
    localStorage.webfav = '[]';
var webfav = localStorage.webfav;

document.addEventListener('contextmenu', function(e){
    e.preventDefault();    
});

document.addEventListener('click', function(e){    
	var rect = menu.getBoundingClientRect();	
	if (e.pageX < rect.left || e.pageX > rect.right || e.pageY < rect.top || e.pageY > rect.bottom){
		menu.style.display = 'none';
    }
});

function genList() {
    json = JSON.parse(localStorage.webfav);
    list.innerHTML = '';
    for (var i=0; i<json.length; i++) {
        var a = document.createElement('a');
        a.href = json[i].website;
        a.target = '_blank';      
        var img = document.createElement('img');
        img.src = json[i].website + '/favicon.ico';
        img.style.width = '50px';
        img.style.height = '50px';
        img.title = json[i].title;
        img.alt = json[i].title;
        
        //长按菜单，https://www.5axxw.com/questions/simple/nyzvs3
        img.addEventListener('contextmenu', function(e){
            e.preventDefault(); // 阻止默认的右键菜单弹出           
        });
        //通过时间间隔区分点击和长按，https://www.jianshu.com/p/b05d3d5d5e81
        (function(i){
            img.addEventListener('mousedown', function(e){
				e.target.style.background = '#eee';
                timer = setTimeout(function(){					
                    menu.style.display = 'block';
                    menu.style.left = e.pageX + 'px';
                    menu.style.top = e.pageY + 'px';
                    id = i;
                    title1 = json[i].title;
                    website1 = json[i].website;
                }, 500);
            });
            var t, time;
            img.addEventListener('touchstart', function(e){
				e.target.style.background = '#eee';
                e.preventDefault();
                t = e.touches[0];
                time = Date.now();
				timer = setTimeout(function(){
					e.target.style.background = '#eee';
                    menu.style.display = 'block';
                    menu.style.left = t.pageX + 'px';
                    menu.style.top = t.pageY + 'px';
                    id = i;
                    title1 = json[i].title;
                    website1 = json[i].website;
                }, 500);
            });
            img.addEventListener('touchend', function(e){     
				e.target.style.background = 'none';
				clearTimeout(timer);
                var dt = Date.now() - time;
                if (dt < 300)
                    window.location.href = json[i].website;                
            });
        })(i);
        img.addEventListener('mouseup', function(e){
			e.target.style.background = 'none';
            clearTimeout(timer);
        });        
        a.appendChild(img);
		var br = document.createElement('br');
		a.appendChild(br);
		var text = document.createTextNode(json[i].title);
		a.appendChild(text);
        list.appendChild(a);
    }
	
	var a = document.createElement('a');
    var button = document.createElement('button');
    button.textContent = '+';
    button.onclick = function(){
        type.textContent = '添加';
        type1 = 0;
        title.value = '';
        website.value = '';
        dialog.showModal();
    };
	a.appendChild(button);
    list.appendChild(a);
}

text_search.addEventListener('keypress', function(e){
	if (e.keyCode == 13) {
		var url = search_engine.options[search_engine.selectedIndex].value.replace('%s', text_search.value);
		window.open(url, "_blank");
   }
});

button_search.addEventListener('click', function(){
   var url = search_engine.options[search_engine.selectedIndex].value.replace('%s', text_search.value);
   window.open(url, "_blank");
});

menu_modify.addEventListener('click', function(){
    menu.style.display = 'none';
    title.value = title1;
    website.value = website1;
    type.textContent = '修改';
    type1 = 1;
    dialog.showModal();
});

menu_delete.addEventListener('click', function(){
    menu.style.display = 'none';
    json = JSON.parse(localStorage.webfav);
    json.splice(id, 1);
    localStorage.webfav = JSON.stringify(json);
    genList();
});

button_confirm.addEventListener('click', function(e){
	if (title.value == '') {
		alert('标题不能为空');
		return;
	}
    if (website.value == '') {
		alert('网址不能为空');
		return;
	}
	for (var i=0; i<json.length; i++) {
		if (json[i].website == website.value){
			alert('网址已经存在！');
			return;
		}
	}
    dialog.close();
    if (type1 == 0) {//添加
        json = JSON.parse(localStorage.webfav);
        json.push({
            title: title.value,
            website: website.value
        });
    } else if (type1 == 1) {//修改
        json[id].title = title.value;
        json[id].website = website.value;        
    }
    localStorage.webfav = JSON.stringify(json);
    genList();
});

button_cancel.addEventListener('click', function(e){
    dialog.close();
});

genList();
</script>
</body>
</html>