工作中搜索页面搜索记录功能的封装(存储到本地)

Posted ——海

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了工作中搜索页面搜索记录功能的封装(存储到本地)相关的知识,希望对你有一定的参考价值。

//!*封装添加搜索记录功能  (newRecord:str,当参数为空时为获取历史记录; num:记录数,默认为12条;)
    function addHisRecord(newRecord, num){
        num = num || 12;
        //获取本地存储的记录
        var hisRecord_str = window.localStorage.getItem(hisRecord_str);
        //当获取到的值为null时,创建一个空数组存储进去
        if(typeof hisRecord_str == object){
            var hisRecord = [];
            hisRecord_str = hisRecord.join(|);
            window.localStorage.setItem(hisRecord_str, hisRecord_str);
        }
        //转换为数组
        hisRecord = hisRecord_str.split(|);
        //当hisRecord_str为空字符串时,清空数组
        if( !hisRecord_str ){
            hisRecord.pop();
        }
        //当实参不为空时,判断:
        if( newRecord ){
            //1.当该数组中不存在传进来的值时,则添加新记录到首位;
            if( hisRecord.indexOf(newRecord) == -1 ){
                hisRecord.unshift(newRecord);
                //当记录小于 num 条时,添加到首位,当大于等于 num 条时,添加到首位并删掉末位
                if( hisRecord.length > num ){
                    hisRecord.pop();
                }
            }else{
                //2.当该数组中存在传进来的值时,则删掉对应位置的记录并添加新记录到首位;
                var indexRecord = hisRecord.indexOf(newRecord);
                hisRecord.splice( indexRecord, 1);
                hisRecord.unshift(newRecord);
            }
            //重新转换成string存储到本地
            hisRecord_str = hisRecord.join(|);
            window.localStorage.setItem(hisRecord_str, hisRecord_str);
        }else{//当实参为空时,返回获取到的历史记录,type: Array;
            return hisRecord;
        }
    }
//!*封装删除搜索记录功能  (index: 0,1,2,...,‘all‘;)
    function removeHisRecord(index){
        //获取本地存储的记录
        var hisRecord_str = window.localStorage.getItem(hisRecord_str);
        //转换为数组
        var hisRecord = hisRecord_str.split(|);
        //当hisRecord_str为空字符串时,清空数组
        if( !hisRecord_str ){
            hisRecord.pop();
        }else if( index == all){
            hisRecord.splice(0, hisRecord.length);
        }else {
            hisRecord.splice(index, 1);
        }
        //将处理过的数据存储并渲染到页面
        hisRecord_str = hisRecord.join(|);
        window.localStorage.setItem(hisRecord_str, hisRecord_str);
        hideOrShowHisRecord(hisRecord_str);//隐藏历史记录部分
        //template_data(hisRecord, ‘#search-item-tmpl3‘, ‘#searchBox3‘);
    }
//!*封装进入页面时查询并渲染搜索记录功能
    function hisRecord(){
        var hisRecord = addHisRecord();
        var hisRecord_str = hisRecord.join();
        //记录存在时渲染
        if( hisRecord_str ){
            template_data(hisRecord, #search-item-tmpl1, #searchBox1);
        }
        //hideOrShowHisRecord( hisRecord_str );//控制显示与隐藏
    }

 

//根据模板,渲染数据到页面(data:待渲染的数据,template:模板,box:待渲染的盒子)
    //需要引入dot.js模板引擎
    function template_data(data, template, box){
        var searchItemTmpl = doT.template($(template).html());
        $(box).html(searchItemTmpl(data));
    }

 

以上是关于工作中搜索页面搜索记录功能的封装(存储到本地)的主要内容,如果未能解决你的问题,请参考以下文章

Android搜索功能的案例,本地保存搜索历史记录

Android搜索功能的案例,本地保存搜索历史记录

搜索保存历史记录功能

文件存储-搜索导航栏-搜索接口-搜索页面-支付宝支付介绍-支付宝二次封装-订单表设计-下单接口-前端支付页面-支付成功回调

本地存储

之前Chrome浏览器在搜索浏览历史的时候,可以通过把页面中的内容(不仅限标题)作为关键词来获取浏