當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

使用localStorage实现历史记录搜索功能也就是天猫app历史记录存储方便浏览

發布時間：2025/4/5 编程问答 45 豆豆

生活随笔收集整理的這篇文章主要介紹了使用localStorage实现历史记录搜索功能也就是天猫app历史记录存储方便浏览小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

得益于H5的API，前端可以很方便的存儲數據，除了cookie，新增的sessionStorage、localStorage可以在用戶本地存儲數據，這可以讓前端實現一些，以前只能有數據庫存儲的功能。

搜索記錄可以用前端實現，由于這些數據沒有特別安全的要求，用戶搜索過的關鍵詞保存在用戶本地是完全可以的。這樣做也可以減少服務器的壓力。

搜索記錄應該采用localStorage永久的存儲，當用戶下次訪問的時候，這個數據還在。

下面的例子是手機端網頁，布局比較粗糙，功能都正常。

主要思路：在向localStorage存儲的時候，以點擊搜索的時間戳為key，以搜索的詞語為value.最多存儲5條數據。當超過5條，會刪除最早的記錄。

?	<!DOCTYPE html>
?	<html>
?	<head lang="en">
?	<meta charset="UTF-8">
?	<title>沒毛病</title>
?	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
?	<meta name="apple-mobile-web-app-capable" content="no">
?	<meta name="apple-mobile-web-app-status-bar-style" content="black">
?	<meta name="format-detection" content="telephone=no">
?	<style>
?	.history{text-align:center;}
?	#sec{width:50%;overflow:hidden;text-align:left;height:38px;border:1px solid #ccc;border-radius: 10px;}
?	.delete:after{clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}
?	.delete>div {border-radius: 50px;float: left;height: 23px;border: 1px solid #ccc;background: #E0E0E0;
?	margin-top: 14px;margin-right: 10px;overflow:hidden;}
?	#search{width: 141px;height: 37px;font-size: 14px;line-height: 14px;color: #959595;padding-bottom: 2px;}
?	#his-dele{width: 22px;height: 22px;line-height: 22px;display: inline-block;background: #E0E0E0;color: #fff;
?	border-radius: 50%;text-align: center;margin-left:10px;float: right;position: relative;top: -26px;}
?	</style>
?	</head>
?	<body>
?	<input class="" id="sec"><!--搜索框-->
?	<button id="search">搜索</button>
?	?
?	<!--歷史記錄-->
?	<div class="current">最近搜索</div>
?	<div class="delete history" style="width: 100%;float: left"></div>
?	?
?	<!--刪除按鈕-->
?	<div class="history" id="his-dele">X</div>
?	?
?	<!--無存儲記錄-->
?	<div class="Storage" style="width: 100px;height: 100px;margin: 0 auto;">無存儲記錄</div>
?	?
?	<script src="js/jquery-1.7.2.min.js"></script>
?	<script>
?	?
?	/搜索記錄相關/
?	?
?	var hisTime;//獲取搜索時間數組
?	var hisItem;//獲取搜索內容數組
?	var firstKey;//獲取最早的1個搜索時間
?	?
?	function init (){
?	?
?	hisTime = [];//時間數組置空
?	hisItem = [];//內容數組置空
?	?
?	for(var i = 0; i < localStorage.length; i++){//數據去重
?	if(!isNaN(localStorage.key(i))){//判斷數據是否合法
?	hisTime.push(localStorage.key(i));
?	}
?	}
?	?
?	if(hisTime.length > 0) {
?	hisTime.sort();//排序
?	for (var y = 0; y < hisTime.length; y++) {
?	localStorage.getItem(hisTime[y]).trim() && hisItem.push(localStorage.getItem(hisTime[y]));
?	}
?	}
?	?
?	$(".delete").html("");//執行init(),每次清空之前添加的節點
?	$(".Storage").show();
?	for(var i = 0; i < hisItem.length; i++){
?	?
?	$(".delete").prepend('<div class="word-break">'+hisItem[i]+'</div>');
?	if(hisItem[i] != ''){
?	$(".Storage").hide();
?	}
?	}
?	?
?	}
?	?
?	init();//調用
?	?
?	$("#search").click(function(){
?	var value = $("#sec").val();
?	var time = (new Date()).getTime();
?	?
?	if(!value){
?	alert("你未輸入搜索內容");
?	return false;
?	}
?	//輸入的內容localStorage有記錄
?	?
?	if($.inArray(value,hisItem) >= 0){
?	?
?	for(var j = 0; j < localStorage.length; j++){
?	if(value == localStorage.getItem(localStorage.key(j))){
?	localStorage.removeItem(localStorage.key(j));
?	}
?	}
?	localStorage.setItem(time,value);
?	?
?	}else{
?	localStorage.setItem(time,value);
?	}
?	init();
?	?
?	});
?	?
?	//清除記錄功能
?	$("#his-dele").click(function(){
?	var f = 0;
?	for(;f<hisTime.length;f++){
?	localStorage.removeItem(hisTime[f]);
?	}
?	init();
?	});
?	?
?	//蘋果手機不兼容出現input無法取值以下是解決方法
?	?
?	$( ".delete" ).on( "click", ".word-break", function() {
?	var div = $(this).text();
?	$('#sec').val(div);
?	});
?	?
?	</script>
?	</body>
?	</html>

如有同學遇到需要做存儲類項目歡迎參考，就是這樣粘貼復制。沒毛病!老鐵。。。。。拿走不謝

轉載于:https://www.cnblogs.com/hjptopshow/p/6694467.html

總結

以上是生活随笔為你收集整理的使用localStorage实现历史记录搜索功能也就是天猫app历史记录存储方便浏览的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： java.util.concurrent
下一篇： java基础-可执行jar包