localStorage实现搜索历史

localStorage实现搜索历史

1.新建历史数组

var historyListArr = [];

2.新建初始化方法

function render(){
    // 获取localStorage数据数据是json格式
    var historyListJson = localStorage.getItem('historyList') || '[]'; //historyList预设的键;
    //把json数据转换成数组
    var historyListArr = JSON.parse(historyListJson);
    // 定义一个空html
    var html = '';
    // 方法二
    for(var i=historyListArr.length-1;i>=0 ;i--){
        var history=historyListArr[i];
        var historyStr="'"+history+"'";
        html += '<li class="search-part-list-item"  οnclick="search('+historyStr+')"><a>'+history+'</a></li>';
    }
    // 判断html里面有数据没
    html = html||'<li>没有搜索记录</li>';
    // 把数据渲染到ul里面
    $('#history').html(html);
}

3.新建保存历史记录方法

function setHistoryItems(key) {
    // 判断点击搜索、搜索框内没有内容提示用户
    if(!key){
        alert('请输入内容');
        return false;
    }
    //如果页面初始化后将localStorage的内容同步到historyListArr中
    var historyList=localStorage.getItem("historyList");
    if (historyList&&historyListArr.length<1){
        historyListArr=JSON.parse(historyList);
    }
    //如果搜索参数已记录
    if (historyListArr.contains(key)) {
        historyListArr.remove(key)
        historyListArr.push(key);
    }else{
        // 追加数据到historyListArr数组中
        if (historyListArr.length>=5){
            historyListArr.shift();
        }
        historyListArr.push(key);
    }
    // 保存更新追加的数据到json数据中
    localStorage.setItem('historyList',JSON.stringify(historyListArr));
    // 渲染数据/直接调用前面的渲染数据函数
    render();
    // 清空搜索框
    $('.search-input').val('');
}

4.新建清空历史记录方法

function clearHistory() {
    // 清空数据
    historyListArr = []; //先把数组设置为空
    localStorage.removeItem('historyList'); //再删除空数据
    // 渲染数据/直接调用前面的渲染数据函数
    render();
}

总结

用户在搜索某条数据的时候调用步骤3的setHistoryItems，将当前搜索名称进行存储，在清空历史记录的时候调用步骤4进行清空。