博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
工作中搜索页面搜索记录功能的封装(存储到本地)
阅读量:5883 次
发布时间:2019-06-19

本文共 2794 字,大约阅读时间需要 9 分钟。

//!*封装添加搜索记录功能  (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));    }

 

转载于:https://www.cnblogs.com/xiaohaifengke/p/6008944.html

你可能感兴趣的文章
老男孩最近几年常用的免费的开源软件
查看>>
计算字符串中回文子串的个数 Palindromic Substrings
查看>>
Python脚本通过邮件发送zabbix报警图片
查看>>
java线上服务故障分析笔记
查看>>
做人与做事的心态
查看>>
css兼容性问题(四)
查看>>
Configure SNMP Settings for vCenter
查看>>
出现“连接到服务器失败。错误: 0x80080005”错误的解决办法
查看>>
我的友情链接
查看>>
python面向对象(二)
查看>>
mysql的安装
查看>>
我的友情链接
查看>>
正则校验密码(字母和数字同时出现 多少位到多少位)
查看>>
谈谈Memcached与Redis(一)
查看>>
moto 917 不想使用TD网人方法
查看>>
软件版本号编写规范及说明
查看>>
Crontab 定时任务设置
查看>>
nginx安装配置+清缓存模块安装
查看>>
大规模并行查询引擎 BlinkDB
查看>>
红帽7系linux破解root密码的三种办法
查看>>