前端實現搜索記錄功能

時間 2019-11-08

標籤前端實現搜索記錄功能简体版

原文原文鏈接

代碼亂掉了。。。移步html

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

搜索記錄能夠用前端實現，因爲這些數據沒有特別安全的要求，用戶搜索過的關鍵詞保存在用戶本地是徹底能夠的。這樣作也能夠減小服務器的壓力。jquery

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

下面的例子是手機端網頁，佈局比較粗糙，除了替換搜索的按鈕圖片。其餘的功能都正常。數據庫

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

localStorage的存儲是有順序的，最早存的會在最底下。安全

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>1元許願</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>
.text-center{text-align:center;}
.box{display:-webkit-box;display:box;}
#idNumber1{width:80%;overflow:hidden;text-align:left;display:block;max-height:100%;border:1px solid #0C0;}
.his-record:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;} {}
.his-record>div{float:left;width:31%;margin:0.5rem 1%;padding:5px 6%;border-radius:3px;border:1px solid #999;color:#999;}

</style>
</head>
<body>
	<section>
    	<div class="box" style="border-radius:5px;">
        	<form id="form1" method="get" action="http://www.baidu.com" style="width:80%">
        	<input class="" id="idNumber1">
            </form>
     		<div style="width:20%;background:url(../assets/images/yy/search.jpg) no-repeat right;background-size:contain;" id="search"></div>
        </div>
    </section>
    
    <section class="his-record text-center">
    </section>
     <!--清空歷史記錄-->
    <section style="position:fixed;bottom:70px;width:100%;">
    	<div class="font-brown text-center" style="border:2px solid #834f1b;padding:3px 15px;margin:0 auto;width:40%;" id="his-dele">清空搜索記錄</div>
    </section>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
	$(document).delegate(".his-record>div","click",function(){
		$("#idNumber1").val($(this).text());	
	});

	/*搜索記錄相關*/
	//從localStorage獲取搜索時間的數組
	var hisTime;
	//從localStorage獲取搜索內容的數組
	var hisItem;
	//從localStorage獲取最先的1個搜索時間
	var firstKey;
	function init (){
	//每次執行都把2個數組置空
	hisTime = [];
	hisItem = [];
	//模擬localStorage原本有的記錄
	localStorage.setItem("a",12333);
	//本函數內的兩個for循環用到的變量
	var i=0
	
	for(;i<localStorage.length;i++){
		
		//alert(typeof(localStorage.key(i)));
		if(!isNaN(localStorage.key(i))){
		  //hisItem.push(localStorage.getItem(localStorage.key(i)));
		  hisTime.push(localStorage.key(i));
		}
	  }
        hisTime.sort();
　　     for(var y=hisTime.length;y>-1;y--){	　
　　　　　　　　　hisItem.push(localStorage.getItem(hisTime[y]));	
	}


//alert("hisTime:"+hisTime); //alert("hisItem:"+hisItem) i=0; //執行init(),每次清空以前添加的節點 $(".his-record").html(""); for(;i<hisItem.length;i++){ //alert(hisItem); $(".his-record").prepend('<div class="word-break">'+hisItem[i]+'</div>') } // bindListener(); } init(); $("#search").click(function(){ var value = $("#idNumber1").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); } //輸入的內容localStorage沒有記錄 else{ //因爲限制了只能有6條記錄，因此這裏進行判斷 if(hisItem.length>5){ firstKey = hisTime[0] localStorage.removeItem(firstKey); localStorage.setItem(time,value); }else{ localStorage.setItem(time,value) } } init(); //正式的時候要提交的！！！ //$("#form1").submit() }); //清除記錄功能 $("#his-dele").click(function(){ var f = 0; for(;f<hisTime.length;f++){ localStorage.removeItem(hisTime[f]); } /* for(var i=0;i<localStorage.length;i++){ localStorage.removeItem(localStorage.key(i)); }*/ init(); }); </script> </body> </html>

　　代碼分析參見下篇博客服務器

　　預覽以下：cookie