昨天公司要求给html5开发的web前端添加 搜索历史记录的功能,在网上找了一些demo,发现或多或少存在一些问题。总之对于不擅长前端的我,想要找到开箱即用的demo真的很难。
所以自己根据自己的设计,写了一个功能的实现。
技术: HTML5 + localStorage【类似cookie的缓存机制】+js栈
实现的方式也非常的简单,【界面没有样式,请包涵】。
localStorage的value不能存数组对象,所以使用数组转成json的格式放在value中,用menuHistory 来操作转换成数组的操作。
-----------------------------------------------------------------------------------------------------------------
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>历史搜索</title> <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/> </head> <body class="bgW"> <div class="wrapper"> <form class="serch IM"> <div class="serInput"> <input placeholder="请输入" autofocus="" id="sec" /> <i style="right: 0.3rem;"></i> </div> <span class="serCancel">取消</span> </form> <ul class="saleDetail"> <li style="color: #666;">搜索历史</li> </ul> <ul class="saleDetail history"></ul> <div class="Storage"></div> <div class="h80"></div> <div class="btnEmpty">清空历史搜索</div> </div> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script>
var ItemName = ""; //localStorage的getItem 和 setItem的数组名字,主要用来做不同界面调用各自的历史记录。 var menuHistory = new Object(); $(function(){ console.log(1111111111111111); initLocalStorageArg("hi_001"); console.log(ItemName); }); $(document).delegate(".history>li","click",function(){ $("#sec").val($(this).text()); }); /** * 初始化相关参数,界面js调用 * menucode:可以是js的名字 */ function initLocalStorageArg(menucode){ //苹果手机不兼容出现input无法取值以下是解决方法 $('.history>li').click(function(){ var div = $(this).text(); $('#sec').val(div); }); ItemName = "hist_"+menucode; initlocalStorage(); showHistDom(); } /** * 历史数据展示 */ function showHistDom(){ $(".history").html(""); for( var i=0 ; i<menuHistory.length;i++){ $(".history").append('<li style="display: block;">'+menuHistory[i]+'</li>') } } /** * 获取指定的localStorageobj对象,并转成Array对象。 */ function initlocalStorage(){ var localStorageobj = localStorage.getItem(ItemName); if(localStorageobj){ }else{ localStorage.setItem( ItemName,"[]"); localStorageobj = localStorage.getItem(ItemName); } menuHistory=JSON.parse( localStorageobj); } /** * 执行记录历史数据 */ function recordHist(){ initlocalStorage(); var value = $("#sec").val(); if(!value){ //这里判断输入的value是否合法,也可以用自己的判断方式 alert("你未输入搜索内容"); return false; } //输入的内容localStorage有记录 if($.inArray(value,menuHistory)>=0){ var keyval = Object.keys(menuHistory).filter(function(x){return menuHistory[x] == value}).toString() ; menuHistory.splice(Number(keyval), 1); //splice(index,1):index代表value值在数组中对应到下标,1:表示删除 }else { if (menuHistory.length > 9) { menuHistory.pop(); }else { } } menuHistory.unshift(value); localStorage.removeItem(ItemName); localStorage.setItem( ItemName,JSON.stringify(menuHistory)); // 因为localStorage的value不能直接放数组,所以转换程json串后,再set showHistDom(); } //清除记录功能 $(".btnEmpty").click(function(){ localStorage.setItem( ItemName,JSON.stringify([])); initlocalStorage(); showHistDom(); }); /*执行搜索的一种方式,绑定回车键*/ $("#sec").on("keypress",function(e){ var keycode=e.keyCode; if(keycode=='13'){ recordHist(); } }); </script> </body> </html>