js实现前端展示搜索历史记录功能——localStorage

功能需求：需要展示搜索历史，并且点击对应选项回显到搜索框

前端解决方法，当然后台给接口就不用了往下看了

1、html部分

    <div class="search-div background_fff seach-top">
        <input type="text" class="fa fa-search block j_name"  placeholder='搜索产品/供应商'/>
        <div class="position-a right-10 top-2 j_search">搜索</div>
    </div>
    <div class="boxtop">
        <div class="search_name" style="color:#777777">历史搜索</div>
        <div>
            <ul class="clearfix font-size-12"></ul>
        </div>
    </div>


    

2、javaScript部分

<script type="text/javascript">
          //1、搜索框输入数据——存值
           function searchData(){
              if ($(".j_name").val()) {
                  $(".j_name").val($(".j_name").val().replace(/\s*/g, ''));
              }
              var name = $(".j_name").val();
              if(name != ''){
                  setHistoryItems(name)
              }
          }
          //2、存值方法,新的值添加在搜索历史数组首位（并且保持始终只存储10条）
          function setHistoryItems(keyword) {
              let { historyItems } = localStorage;
              if (historyItems === undefined) {
                  localStorage.historyItems = keyword;
              } else {
                    let lista = new Array()
                    lista = historyItems.split('|')
                    distinct(lista)
                    if(lista.length>10){
                        lista.splice(9)
                    }
                    historyItems = keyword + '|' + lista.filter(e => e != keyword).join('|');
                      localStorage.historyItems = historyItems;
              }
              list1 = localStorage.historyItems.split('|')
              distinct(list1)
           };
          //3、数组去重（去除多条相同搜索数据）
          function distinct(list) {
              return Array.from(new Set(list))
          }
          //4、取值写入页面
          $(function(){
            var str=localStorage.historyItems;
            var s = '';
            if(str==undefined){
                s='<div class="align-center">暂无搜索记录...</div>';
                $("#lssslb").append(s);
            }else{
                list1=str.split("|");
                 let html_i = ''
                 if(list1.length>0){
                    for (let index = 0; index < list1.length; index++) {
                      html_i += '<li class="float-left"><span class="guid_link" style="display: inline-block;">'+list1[index]+'</span></li>';
                    }
                    $('.boxtop ul').html(html_i);
                }
             }
        });
        //5、点击历史搜索项，回显到搜索框
        $(document).on('click', '.guid_link',function(){
              $(".j_name").val($(this).html())
        });
    </script>

：生成的节点绑定点击方法直接绑定会失效，需要如上绑定