来了新公司之后负责手机站,有一个功能是需要做一个搜索历史记录的功能,百度了一些有的说数据库建一张搜索历史记录表之类的,和我的需求不是很符合,所以找了个前端实现功能的,样式的代码是偷前端写的-.-,在这里分享一下下

<body>
<div class="d_setop">
	<a href="javascript:history.go(-1);"><img src="" /></a>
	<input type="text" placeholder="请输入用户昵称" />
	<p>搜索</p>
</div>
<p style="padding-top: .66rem;"></p>
<div class="d_secontent">
</div>
<p class="d_seclear">清除搜索历史</p>
<p class="hint"></p>
</body>

有图片什么的我删掉了,因为我也懒得传。
js部分找到了一个网上分享的方法,感觉还不错,存入到前端localStorage缓存里面

$(function(){
		var str=localStorage.historyItems;
		var s = '';
		if(str==undefined){
			$(".d_seclear").html('暂无搜索记录...')
		}else{
			var strs= new Array();
			strs=str.split("|");
			for(var i=0;i<strs.length;i++){
				s+= "<a href='/search?keyword="+strs[i]+"' ><p>"+strs[i]+"</p></a>";
			}
			$(".d_secontent").append(s);
		}
		$(".d_setop p").on("click",function(){
			if($('.d_setop input').val()==''){
				hint("请输入用户昵称或UID",1500)
			}else{
//			请求接口成功跳转
				location.href='/search?keyword='+$('.d_setop input').val();
				var keyword=$('.d_setop input').val();
				setHistoryItems(keyword);
			}
		});
		$(".d_seclear").on("click",function(){
//		请求接口成功清除
			$(".d_secontent").empty();
			clearHistory();
		})
		var isOpen=true,page=0;
		$(".d_ilcontent .d_ilbtn").on("click",function(){
			var index=$(".d_ilcontent .d_ilbtn").index(this);
//		数据请求
			$(".d_ilcontent>div").eq(index).hide();
		})
	})
	//存值方法,新的值添加在首位
	function setHistoryItems(keyword) {
		let { historyItems } = localStorage;
		if (historyItems === undefined) {
			localStorage.historyItems = keyword;
		} else {
			historyItems = keyword + '|' + historyItems.split('|').filter(e => e != keyword).join('|');
			localStorage.historyItems = historyItems;
		}
	}
	//清除值
	function clearHistory() {
		localStorage.removeItem('historyItems');
		$(".d_seclear").html('暂无搜索记录...')
		var div = document.getElementsByClassName("d_secontent");
		/*while(div.hasChildNodes()) //当div下还存在子节点时 循环继续
		{
			div.removeChild(div.firstChild);
		}*/
		// $("#lssslb").append('<div class="rmssts">暂无搜索记录...</div>');
		window.location.reload();
	}

完整代码在这里,可以直接复制到html文件在浏览器运行

<!DOCTYPE html>
<html>
<style>
	*{margin:0;padding:0;box-sizing: border-box;}
	html{overflow-y: scroll;}
	body{  background:#fff; color:#333;font-size:14px; font-family: Microsoft Yahei; -webkit-text-size-adjust:none;  }
	ol,ul {list-style: none;}
	h1,h2,h3,h4,h5,h6 {  font-weight:normal;  font-size:100%;  }
	address,i,em,strong {  font-style:normal;  font-weight:normal;  }
	a{ color:#555; text-decoration:none;}
	input,textarea,select,button {  font:14px Microsoft Yahei,Verdana,Helvetica,Arial,sans-serif;  border:none;  outline: none;  }
	/*搜索*/
	.d_setop{position: fixed;top: 0;left: 0;width: 6.9rem;height: .66rem;background: #FFFFFF;margin: 0 .3rem;}
	.d_setop img{height: .32rem;float: left;margin-top: .17rem;}
	.d_setop input{float: left;height: .66rem;background: #f0f0f0;width: 5.5rem;border-radius: .5rem;margin-left: .3rem;padding-left: .3rem;color: #333333;line-height: .66rem;font-size: .28rem;}
	.d_setop p{float: right;font-size: .28rem;line-height: .66rem;color: #333333;}
	.d_secontent p{height:.88rem ;padding: 0 .3rem;border-bottom: solid 1px #E6E6E6;line-height: .88rem;font-size: .26rem;color: #333333;}
	.d_seclear{line-height: 1rem;color: #666666;font-size: .26rem;text-align: center;}
</style>
<body>
<div class="d_setop">
	<a href="javascript:history.go(-1);"><img src="" /></a>
	<input type="text" placeholder="请输入用户昵称或UID" />
	<p>搜索</p>
</div>
<p style="padding-top: .66rem;"></p>
<div class="d_secontent">
</div>
<p class="d_seclear">清除搜索历史</p>
<p class="hint"></p>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
	document.documentElement.style.fontSize = document.documentElement.clientWidth / 7.5 + 'px';
	$(function(){
		var str=localStorage.historyItems;
		var s = '';
		if(str==undefined){
			$(".d_seclear").html('暂无搜索记录...')
		}else{
			var strs= new Array();
			strs=str.split("|");
			for(var i=0;i<strs.length;i++){
				s+= "<a href='/search?keyword="+strs[i]+"' ><p>"+strs[i]+"</p></a>";
			}
			$(".d_secontent").append(s);
		}
		$(".d_setop p").on("click",function(){
			if($('.d_setop input').val()==''){
				hint("请输入用户昵称或UID",1500)
			}else{
//			请求接口成功跳转
				location.href='/search?keyword='+$('.d_setop input').val();
				var keyword=$('.d_setop input').val();
				setHistoryItems(keyword);
			}
		});
		$(".d_seclear").on("click",function(){
//		请求接口成功清除
			$(".d_secontent").empty();
			clearHistory();
		})
		var isOpen=true,page=0;
		$(".d_ilcontent .d_ilbtn").on("click",function(){
			var index=$(".d_ilcontent .d_ilbtn").index(this);
//		数据请求
			$(".d_ilcontent>div").eq(index).hide();
		})
	})
	//存值方法,新的值添加在首位
	function setHistoryItems(keyword) {
		let { historyItems } = localStorage;
		if (historyItems === undefined) {
			localStorage.historyItems = keyword;
		} else {
			historyItems = keyword + '|' + historyItems.split('|').filter(e => e != keyword).join('|');
			localStorage.historyItems = historyItems;
		}
	}
	//清除值
	function clearHistory() {
		localStorage.removeItem('historyItems');
		$(".d_seclear").html('暂无搜索记录...')
		var div = document.getElementsByClassName("d_secontent");
		/*while(div.hasChildNodes()) //当div下还存在子节点时 循环继续
		{
			div.removeChild(div.firstChild);
		}*/
		// $("#lssslb").append('<div class="rmssts">暂无搜索记录...</div>');
		window.location.reload();
	}
</script>
</html>

另外把网上找到的代码贴出来,也是可以直接复制到html文件里在浏览器跑的,不过没有样式

<html>
<input name="keywords" id="keywords" type="text" class="sso_wk" x-webkit-speech="" autofocus placeholder="请输入您要搜索产品" onkeydown="if(event.keyCode==13){SiteSearch();return false};">  
<input name="" class="sso_an" type="button" onclick="SiteSearch();">  
<div class="lsss">历史搜索:</div>  
<div class="sslb" id="lssslb">  
</div
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script>
//产品搜索并存值  
var thisurl="search.aspx?action=search";  
function SiteSearch(){  
    var sszd = $("#keywords").val();  
    setHistoryItems(sszd);  
      location.href=thisurl+"&sszd="+sszd+"";  
};  
//取值写入页面  
$(function(){  
    var str=localStorage.historyItems;  
    var s = '';  
    if(str==undefined){  
        s='<div class="rmssts">暂无搜索记录...</div>';  
        $("#lssslb").append(s);  
    }else{  
        var strs= new Array();  
        strs=str.split("|");  
        for(var i=0;i<strs.length;i++){  
            s+= "<a href='search.aspx?action=search&sszd="+strs[i]+"' >"+strs[i]+"</a>";  
        }  
        $("#lssslb").append(s+'<input type="button" class="scls" onclick="clearHistory();" value="清除历史记录">');  
    }  
});
//存值方法,新的值添加在首位  
function setHistoryItems(keyword) {  
    let { historyItems } = localStorage;  
    if (historyItems === undefined) {  
        localStorage.historyItems = keyword;  
    } else {  
        historyItems = keyword + '|' + historyItems.split('|').filter(e => e != keyword).join('|');  
        localStorage.historyItems = historyItems;  
    }  
};  
//清除值  
function clearHistory() {   
    localStorage.removeItem('historyItems');  
    var div = document.getElementById("lssslb");  
    while(div.hasChildNodes()) //当div下还存在子节点时 循环继续  
    {  
        div.removeChild(div.firstChild);  
    }  
    $("#lssslb").append('<div class="rmssts">暂无搜索记录...</div>');  
}  
</script>
分类: web前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注