搜索历史localStorage本地化存储

冯奎
2018-05-27 22:13:56
HTML
html javascript

写网站是有时我们要将搜索历史存储起来，
那么有什么办法可以不依靠数据库，将搜索历史存储起来呢？
介绍一下H5的localStorage(点击查看介绍)，Web存储
使用localStorage我们可以将搜索历史快速的存储起来，
这样搜索历史就特别的方便了。

下面介绍一下使用方法，
首先是html页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <title>搜索历史----localstorage本地化存储</title>
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/bootstrap-3.3.4.css">
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
</head>
<body>
    <div class="col-lg-6" style="margin-top:20px;">
        <div class="input-group">
            <input type="text" class="form-control" id="keywords" placeholder="随便输入查看效果，默认5条">
                <span class="input-group-btn">
                    <button class="btn btn-default" id="search" type="button">Go!</button>
                </span>
            </div><!-- /input-group -->
        </div><!-- /.col-lg-6 -->
    </div><!-- /.row -->
    <br><br>
    <div style="margin:20px 20px 0px 20px;">
        <span>搜索历史</span>
        <span id="empty">清除历史</span>
    </div>
    <div style="margin:20px;" id="history">

    </div>
</body>
</html>

相关JS(绑定回车事件、搜索点击事件、清空搜索历史):

$(function(){
    update_history();
    // 绑定回车事件
    $(document).keydown(function(event){ 
        if(event.keyCode==13){ 
            $("#search").click(); 
        } 
    }); 

    // 搜索点击事件
    $("#search").click(function(){
        var keywords = $("#keywords").val();
        search_history(keywords); //添加到缓存
        update_history(); //更新搜索历史
    })

    // 清空搜索历史
    $("#empty").click(function(){
        mystorage.remove('keywords');
        $("#history").html(" ");
    })
})

更新搜索历史：

/**
 * [update_history 更新搜索历史]
 * @return {[type]} [description]
 */
function update_history(){
    console.log(mystorage.get("keywords"));
    var history_keywords = mystorage.get("keywords");
    if (history_keywords) {
        var html = "";
        $.each(history_keywords,function(i,v){
            html += "<a class='btn btn-default' href='javascript:;' role='button'>"+v+"</a>"
        })
        $("#history").html(html);
    };
}

将搜索历史存储起来，放入localStorage数组中，并将多余的清除掉

/**
 * [search_history //搜索历史函数存储]
 * @param  {[type]} value [搜索词]
 * @return {[type]}       [description]
 */
function search_history(value){  
    var data = mystorage.get("keywords");
    if (!data) {
        var data = []; //定义一个空数组
    }else if(data.length === 5){ //搜索历史数量
        data.shift();  //删除数组第一个元素有
    }else{

    };
    if (value) {  //判断搜索词是否为空
        if (data.indexOf(value)<0) {  //判断搜索词是否存在数组中
            data.push(value);    //搜索词添加到数组中
            mystorage.set("keywords",data);  //存储到本地化存储中
        };
    };
}

最引入Web存储 localStorage 和 sessionStorage,中封装好的mystorage函数，这样一个简单的搜索历史就完成了

冯奎博客