得益於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> |
如有同學遇到需要做存儲類項目歡迎參考，就是這樣粘貼復制。沒毛病!老鐵。。。。。拿走不謝