JavaScript中历史搜索记录的实现,在h5页面,引用jQuery写法,使用localStorage存储

效果图: 

说太多没用的  直接上代码   有更好的修改的话,可以留言

html代码: 

 <div class="title_box">
        <div class="back">
            <a href="./index.html">
                <span>
                    <</span> <span>返回
                </span>
            </a>
        </div>
        <div class="title">搜索页面</div>
    </div>
    <div class="main">
        <div class="search_box">
            <div class="search">
                <input class="inp" type="text" placeholder="请输入想找的商品">
                <div class="cancel">取消</div>
            </div>
        </div>
        <div class="hot_box">
            <div class="hot_title">
                <span>热搜</span>
            </div>
            <div class="hot_list">
                <div class="hot_shop">睡衣 新品</div>
                <div class="hot_shop">圣诞礼物</div>
                <div class="hot_shop">衣服鞋子</div>
            </div>
        </div>        
    </div>
    <div class="hot_box search_history">
        <div class="hot_title">
            <span>历史记录</span>
            <!-- <span>清除历史</span> -->
        </div>
        <div class="hot_list hot_history">
            <!-- <div class="hot_shop">睡衣 新品</div>
            <div class="hot_shop">圣诞礼物</div>
            <div class="hot_shop">衣服鞋子</div> -->
        </div>
    </div>

css代码:

html{font-size:13.33333333vw}
body,html {
    margin: 0;
}
.main  {
    background-color: #efeff4;
    height: 2.7rem;
}
.title_box {
    width: 100%;
    height: .8rem;
    background-color: #fff;
    /* display: flex; */
    /* align-items: center; */
    box-sizing: border-box;
    padding: 0px .32rem;
    /* justify-content: center; */
}
.title_box .back {
    height: 100%;
    float: left;
}
.title_box .back a {
    display: block;
    height: 100%;
    font-family: PingFang-SC-Medium;
    font-size: .32rem;
    color: #333333;
    line-height: .8rem;
}
.title_box .title {
    font-size: .36rem;
    color: #333;
    line-height: .8rem;
    text-align: center;
    margin-right: 0.4rem;
    font-weight: 600;
}
.search_box {
    width: 100%;
    height: .88rem;
    background-color: #efeff4;
    box-sizing: border-box;
    padding: 0px .28rem;
}
.search_box .search {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.search_box .search >input {
    width: 6.18rem;
    height: .56rem;
    background-color: #ffffff;
    border-radius: .1rem;
    border: solid 1px #e6e6ea;
    padding-left: 20px;
    box-sizing: border-box;
} 
.search_box .search .cancel {
    font-family: PingFang-SC-Medium;
    font-size: .32rem;
    color: #f05654;
}
.hot_box {
    width: 100%;
    height: 1.6rem;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0px .3rem;
}
.hot_box .hot_title {
    color: #333;
    font-size: .28rem;
    height: .6rem;
    line-height: .6rem;
}
.hot_box .hot_list {
    width: 100%;
    display: flex;
    align-items: center;
}
.hot_box .hot_list .hot_shop {
    padding: .16rem .34rem;
    background-color: #efeff4;
    border-radius: .27rem;
    font-size: .24rem;
    margin-right: .3rem;
}
.hot_box .history {
    text-align: center;
    font-size: .24rem;
}

js代码实现的逻辑: 

<script>
    $(function(){
        var search = new Search() 
        search.getInp()
        search.getInpData()
        search.creatHistory()
    })
    var Search = function(){}
    Search.prototype = {
        getInpData:function(){

            return JSON.parse(localStorage.getItem('searchArr')||'[]')
        } ,
        getInp: function(){
            $('.inp').on('keypress',function(e){
                var value =$.trim($(this).val())
                if(!value){                    
                    return;
                }
                if(e.keyCode ==13){
                    // console.log(value)
                    Search.prototype.getSearchList(value)
                    Search.prototype.insertTOSearchHistory(value)
                    $('.history').css({'display': 'none'})         
                }
            })
        },
        getSearchList: function(key){ // 将搜索记录存在本地
            var list = Search.prototype.getInpData()
            // console.log(list)
            $.each(list,function(i,item){
                if(item==key){
                    // console.log(key,item)
                    list.splice(i,1)
                    return true;
                }                
            })
            list.push(key)            
            // 记录最多的条数
            if(list.length>4){
                list.splice(0,list.length-4)
            }            
            localStorage.setItem('searchArr',JSON.stringify(list))
              
        },
        insertTOSearchHistory: function(value){ //显示在页面上 
            var str ="<div class='hot_shop' id='"+value+"'>"+value+"</div>"       
            $('#'+value).remove();
            $('.inp').val('');
            if ($('.hot_history').children().length == 0) {
                $('.hot_history').append(str)
            } else {
                if ($('.hot_history').children().length < 4) {
                    $(str).insertBefore($('.hot_history div:eq(0)'))
                }else {
                    $('.hot_history div:last').remove()
                    $(str).insertBefore($('.hot_history div:eq(0)'))
                }
            }
            
        },
        creatHistory: function(){ //初始化加载
            var list = Search.prototype.getInpData()
            console.log(list)
            if(list.length==0){
                var str = "<div class='history'>"+'暂无搜索记录'+"</div>"
                $('.search_history').append(str)
            }else{
                
                list.forEach(item => {
                    var str = "<div class='hot_shop'>"+item+"</div>" 
                    $('.hot_history').append(str) 
                });
            }
        }
    }
</script>