使用JSlocation实现搜索框历史记录功能

  

    
    
    

      
搜索记录:
      //用于保存记录信息
      

      
    
  

* {
   margin: 0;
   padding: 0;
 }
 input {
   border: 0;
   vertical-align: middle;
   float: left;
 }
 #searchbox {
   width: 300px;
   height: 50px;
   background: #fff;
   margin: 100px auto;
   border: 1px solid #ccc;
   position: relative;
 }
 #inpt {
   width: 240px;
   height: 50px;
   outline: none;
   text-indent: 10px;
 }
 #btn {
   width: 60px;
   height: 50px;
   cursor: pointer;
 }
 /* 历史记录框 */
 #historybox {
   width: 280px;
   padding: 10px 10px 50px;
   border: 1px solid #ccc;
   position: absolute;
   top: 50px;
   left: -1px;
   /* 隐藏 */
   display: none;
 }
 #historybox h3 {
   margin-bottom: 10px;
 }
 #list {
   list-style: none;
 }
 #list .on {
   float: left;
   border: 1px solid #ccc;
   background: #aaa;
   height: 30px;
   line-height: 30px;
   margin: 0 2px;
   border: 1px solid #ccc;
   border-radius: 5px;
 }
 #list .active {
   color: #fff;
   text-decoration: none;
   padding: 2px;
 }

$(function () {
  let max_history = 7;// 存储最大历史数据
  // 鼠标移入事件
  $('#inpt').on('focus', function () {
    $('inpt').val = '';
    let data = localStorage.getItem('data'); //从本地存储中读取数据
    if (!data) {
      $('#historybox').css('display', 'none');
    } else {
      $('#historybox').css('display', 'block');
      historydata(JSON.parse(data)); // 渲染数据
    }
  })
  // 鼠标移出事件
  $('#inpt').on('blur', function () {
    $('#historybox').css('display', 'none');
    init_history();// 初始化历史记录，清空记录
  })
  //点击搜索按钮时，将搜索内容添加到本地存储
  $('#btn').on('click', function () {
    var search = inpt.value;
    var data = localStorage.getItem('data'); //从本地存储中读取数据
    if (data) {
      var arr = JSON.parse(data); //如果有数据则转换成对象或数组
    } else {
      var arr = []; //如果没有数据，则新增一条
    }
    arr.push(search);
    removalDuplicate(arr);// 对用户输入值进行处理(去重-筛选)
    localStorage.setItem('data', JSON.stringify(arr)); //将数据写入到本地存储中
  })
  // 数组去重-筛选函数
  function removalDuplicate(arr) {
    for (let i = 0; i ${searchArr[i]}
`);
      }
    } else {//否则渲染最大历史记录条数
      for (let i = 0; i ${searchArr[i]}
`);
      }
    }
  }
  // 初始化-清空历史记录
  function init_history() {
    $('#list').html('');
  }
})