js 实现历史搜索记录功能

废话不多说，上代码：

html css就不展示了

{{--历史搜索--}}
    <div class="hot-keyword history">
        <div class="title_keyword">历史搜索</div>
        <ul class="keyword_list history_list">

        </ul>
    </div>

js：最原始的js代码，没有经过优化的，你可以优化一下

<script>
    //取值写入页面
    $(function() {
        //历史记录  localStorage.historyItems;
        var str = localStorage.historyItems;
        var s = '';
        if(str == undefined || null) {
            $('.history').hide();//历史记录隐藏
        } else {
            var strs = [];
            strs = str.split("|");
            console.log(strs)
            for(var i = 0; i < strs.length; i++) {
                s += "<li>" + strs[i] + "</li>";
            }
            console.log(s)
            $(".history_list").html(s);

            var lists=document.querySelectorAll('.history_list li');
            /*点击li中的内容时，让内容到输入框中*/
            for(var i=0;i<lists.length;i++){
                lists[i].onclick = function() {
                    var text=this.innerHTML;
                    //window.location.href = '/query/detail/'+text+'/recommend'+'/1'
                }
            }
        }
    });
    //存值方法,新的值添加在首位
    //当为空的时候设置一个关键字进去，判断如果关键字是否存在，不存在就追加新的关键字
    function setWorld(keyword) {
        //var {historyItems}=localStorage;
        console.log(keyword)
        var historyItems = localStorage.historyItems
        if(historyItems === undefined) {
            localStorage.historyItems = keyword;
        } else {
            historyItems = keyword + '|' + historyItems.split('|').filter(e => e != keyword).join('|');
            localStorage.historyItems = historyItems;
        }
    }
    //清除值
    $('.clearAll').click(function() {
        if(confirm('是否清空')){
            localStorage.removeItem('historyItems');
            $('.search-list').html('');
            $('.history').hide();
        }else{
            console.log('取消清空')
        }
    })


    //判断输入框是否为空
    function isEmpty(){
        if($('#searchInput').val().trim() == ''|| null ||undefined){
            $.alert('请输入您要搜索的名称')
        }else{
            //window.location.href = '/query/detail/'+$('#_query').val()+'/recommend'+'/1'
            $.alert('搜索成功')
            setWorld($('#searchInput').val());//存搜索记录
        }
    }

    //点击搜索进行查询
    $('.search_btn').on('click',function(){
        isEmpty()
    })
</script>

代码就到此为止了，仅供参考