接上篇博客：

先看js的第1段代碼

$(document).delegate(".his-record>div","click",function(){
		$("#idNumber1").val($(this).text());	
	});

　　

因為我們的搜索記錄是通過prepend（）方法動態(tài)添加的，如果用一般的事件綁定方法，會沒有效果。熟悉jquery的朋友知道，這時候應該是delegate()方法出場了，w3cschool的解釋：使用 delegate() 方法的事件處理程序適用于當前或未來的元素（比如由腳本創(chuàng)建的新元素）。

接下來是init()函數(shù)，這里的考慮是：首次加載頁面，用這個函數(shù)獲取數(shù)據(jù)，顯示搜索記錄。當我們點擊搜索記錄或者輸入搜索詞，再次搜索的時候，也要刷新搜索記錄顯示。另外，清除記錄的時候，也需要刷新記錄顯示，基于這些考慮，寫了init()函數(shù)。調(diào)用的地方有4個。

這段判斷是，去掉我們不想要的localStorage記錄，因為在打開本頁面之前，本域名下的localStorage可能就有記錄。isNaN（）判斷字符串里的內(nèi)容是否為數(shù)字。這里判斷并不是很嚴謹，可以改寫。

很重要的一點，init（）執(zhí)行時，每次會從localStorage獲取【最新】的記錄，然后添加到顯示的區(qū)域。因此，必須每次清空這個區(qū)域。

下面的代碼來到點擊搜索按鈕，改變localStorage記錄，然后調(diào)用init（）讓最新的記錄顯示。第1步，先判斷輸入。如果輸入為空，直接返回，不往下執(zhí)行：

	if(!value){
			alert("你未輸入搜索內(nèi)容");
			return false;
		}

　　

輸入合法的情況又分了兩種：1.輸入的內(nèi)容localStorage記錄里有的情況，2.輸入的內(nèi)容沒有記錄的情況。情況1不用考慮大于6條記錄，因為重復的時候只會改變順序而不會新增記錄。這樣不會超過原先的記錄條數(shù)。情況2就需要考慮記錄條數(shù)大于6的時候，出現(xiàn)大于6，必須把最早的記錄移除，然后把最新的記錄添加進去。

情況1的條件：

//輸入的內(nèi)容localStorage有記錄
		if($.inArray(value,hisItem)>=0){

　　

這里用到了jquery的工具方法：$.inArray（）。這個方法是數(shù)組的indexof()方法。我們都知道，字符串擁有indexof方法。有了jquery，我們也可以對數(shù)組操作相同的功能。

最后的一塊就是清除記錄，清除記錄的時候并沒有直接用localStorage.clear()方法，因為這種清除會把本域名所有的記錄清除，這是我們不想要的。我們只需要把搜索記錄相關(guān)的記錄清除即可，然后調(diào)用init()方法。這里調(diào)用init()，而不是直接清空顯示區(qū)域的html標簽，是出于嚴謹?shù)目紤]，保持網(wǎng)頁顯示與localStorage存儲一致。

總結(jié)

以上是生活随笔為你收集整理的前端实现搜索记录功能-技术分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。