使用jQuery和LocalStorage实现搜索历史记录功能

   type="text" name="val" placeholder="请输入您的问题" maxlength="25" class="input" autocomplete="off" />
   type="button" value="搜索" class="search_sub" />

$(document).ready(function() {
  // 初始化搜索历史
  initLocalStorage();
  // 监听搜索按钮点击事件
  $('.search_sub').click(function() {
    var value = $('.input').val();
    setHistoryItems(value);
  });
  // 监听历史记录项点击事件
  $('.ulHis li').on('click', function() {
    var text = $(this).text().trim();
    setHistoryItems(text);
  });
  // 清除历史记录
  $('#delHis').click(function() {
    clearHistory();
  });
});

function initLocalStorage() {
  var historyItems = localStorage.getItem('historyItems');
  if (historyItems !== null) {
    var items = historyItems.split('|');
    if (items.length > 0) {
      var html = '';
      for (var i = 0; i         html += '
' + items[i] + '
';
      }
      $('.ulHis').html(html);
    }
  }
}

function setHistoryItems(keyword) {
  var maxNum = 5;
  keyword = keyword.trim();
  var historyItems = localStorage.getItem('historyItems') || '';
  var items = historyItems.split('|').filter(function(item) {
    return item !== keyword;
  });
  if (items.length >= maxNum) {
    items.shift();
  }
  items.unshift(keyword);
  localStorage.setItem('historyItems', items.join('|'));
}

function clearHistory() {
  localStorage.removeItem('historyItems');
  $('.ulHis').empty();
}