<!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=" 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>