<!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"> </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> <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();//排序
hisTime.reverse(); //翻轉 for (var y = 0; y < hisTime.length; y++) { localStorage.getItem(hisTime[y]).trim() && hisItem.push(localStorage.getItem(hisTime[y])); } } $(".delete").html("");//執行init(),每次清空之前添加的節點
for(var i = 0; i < hisItem.length; i++){ $(".delete").prepend('<div class="word-break">'+hisItem[i]+'</div>'); } } 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; $("history").html();
init(); });
//蘋果手機不兼容出現input無法取值以下是解決方法
$( ".delete" ).on( "click", ".word-break", function() {
var div = $(this).text();
$('#sec').val(div);
});
</script>
</body>
</html>