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


    //!*封装添加搜索记录功能  (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));
        }
  • 相关阅读:
    解决本地浏览器的跨域问题
    页面嵌入iframe关于父子传参调用
    仿微信、qq聊天,@好友功能
    创建新react项目 运行npm start 报错踩过的坑
    前端向后端获取数据的三种方法:ajax、axios、fetch
    观察者模式代码详解
    代理模式实现图片预加载、懒加载
    网站登录注册-Session 和token的总结
    浅谈MVC、MVVM的区别
    vue中methods、computed、watch区别
  • 原文地址:https://www.cnblogs.com/xiaohaifengke/p/6008944.html
Copyright © 2020-2023  润新知