客戶端使用本地儲存localStorage
阿新 • • 發佈：2019-01-23
<!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="https://code.jquery.com/jquery-3.1.1.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>
得益於H5的API，前端可以很方便的儲存資料，除了cookie，新增的sessionStorage、localStorage可以在使用者本地儲存資料，這可以讓前端實現一些，以前只能有資料庫儲存的功能。
搜尋記錄可以用前端實現，由於這些資料沒有特別安全的要求，使用者搜尋過的關鍵詞儲存在使用者本地是完全可以的。這樣做也可以減少伺服器的壓力。
搜尋記錄應該採用localStorage永久的儲存，當用戶下次訪問的時候，這個資料還在。
下面的例子是手機端網頁，佈局比較粗糙，功能都正常。
