H5實現搜尋記錄功能
<!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="http://www.htmleaf.com/js/jquery/1.7.2/jquery.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>