html5实现搜索历史记录【轻松搞定】

来源：互联网发布：蘑菇网络词是什么意思编辑：程序博客网时间：2024/05/18 00:52

昨天公司要求给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>

阅读全文

1 0

html5实现 搜索历史记录【轻松搞定】

html5实现搜索历史记录【轻松搞定】