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

最新推荐文章于 2021-12-02 21:39:37 发布

原创最新推荐文章于 2021-12-02 21:39:37 发布 · 8.9k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #搜索

本文介绍了一种利用HTML5的localStorage实现前端搜索历史记录的方法。通过JavaScript操作localStorage存储和读取历史数据，并展示了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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