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

//!*封装添加搜索记录功能  (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));
    }
时间: 2024-08-10 23:01:31

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

工作中常用Linux命令记录

在工作中我们会用到各种各样的命令来满足我们工作的需要,再次以博文的方式记录一下.一天记录一条吧. 一.ls    列出所在目录的文件 -1    以列表的形式显示. -t    按照时间的方式排序一般与l一起使用.  ls与dir的区别是怎么样的平时没有注意过,有哪位网友平时研究过可以分享一下.

个人理解---在开发中何时加入日志记录功能[java]

是这样的:俩个月前做的一个小功能,今天经理突然问我这个'清除复投记录'功能是不是我做的,我说是,很久以前了.他说昨天一个客户找过来了,后台把人家的复投记录清除掉了,不知道何时清除的,我记得当时做的时候跟产品商量的就是直接删掉这条记录并不是修改记录的status,谁会想到有客户会来找呢?清除记录出现异常的时候才会打印日志,正确清除的情况并不会打印日志 为了有一个良好的开发习惯,应当在重要的地方加入日志的打印,并不是每行代码的后面都要加日志,其实不论执行结果是正确的还是异常的都需要打印日志,包括用户

工作中一些环境问题解决记录

1.MySQL不能被正常安装导致apt使用异常 卸载MySQL重新安装会出现如下问题: 出现该问题主要是安装MySQL前需要删除 /var/lib/mysql文件夹以及/etc/mysql文件夹执行命令: sudo rm /var/lib/mysql -R sudo rm /etc/mysql -R sudo apt-get autoremove mysql* --purge sudo apt-get remove apparmor

如何在百度搜索页面中插入广告

郑重声明:本人发布分享是为了让更多的人知道这项技术的存在,从而寻找一些防止的方法,并不是想做一些非法的操作.我也很不喜欢在页面中植入广告.所以希望各位大神看了此文后能多提一些建议与改进.本人会虚心接受.不喜勿喷!!! 该技术是我无意中接触的能够跨域操作JS的情况,通过跨域JS操作可以实现在你使用百度搜索跳转到你所在的页面的时候会自动使得百度搜索页面也进行相应的跳转,从而实现操作者的很多目的.目前我通过研究已经弄懂实现原理,并未亲自尝试,所以该文也是起抛砖引玉的作用,希望各位前端大牛能进行一下研究

java读取某个目录下所有文件并通过el表达式将相关文件信息展示出来,js提供页面搜索及查看下载功能

从服务器上读取某个目录下的文件  将文件名 文件修改日期   及文件 大小展示在前台  并可以查看及下载 第一步:读取文件目录下的文件,并将文件按时间由大到小排列 public ArrayList<File> getLogs() { // TODO Auto-generated method stub ArrayList<File>  tomcatLogs = new ArrayList<File>(); File path = new File(""

Linux基础教程 linux中使用find命令搜索文件常用方法记录

find是linux非常强大的搜索命令,通过man find查看find手册,可以发现find的说明一屏接一屏,估计要看完也得花不少时间.兄弟连Linux培训 小编总结了下,整理出find常用的使用方法. 1.命令格式 find 搜索路径 搜索表达式 搜索路径:这个比较容易理解,就是指定的搜索目录,比如/etc.搜索路径也可以同时指定多个,用空格分开就可以了,如/etc /home. 搜索表达式:find命令关键就是在表达式上,表达式的选项非常多.以下命令测试主要根据表达式的选项来划分. 2.命

在页面中嵌入百度搜索框

呈现效果如下: 实现代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>在页面中嵌入百度搜索框</title> <style> form { width: 500px; height: 50px; padding: 10px 20px 20px; text-align: center; line-height: 50px;

关于项目中所有填写都变成乱码的解决方法--搜索不出记录

表现:搜索不出记录 解决方法: 一,找到tomcat的server.xml文件修改: 默认情况下,tomcat使用的的编码方式:iso8859-1 修改tomcat下的conf/server.xml文件 找到如下代码:    <Connector port="8080" protocol="HTTP/1.1" connectionTimeout="20000" redirectPort="8443" />这段代码规

android中实现内容搜索

在编写android搜索代码的时候,怎样去实现搜索功能,考虑中的有两种: 自己定义搜索方法: 1.自己定义搜索输入框,搜索图标,搜索button 2.自己定义语音输入方法 3.自己定义经常使用热词内容.样式 4.自己定义浏览记录内容和样式 5.自己定义弹出样式使用spinner配合listView 6.自己定义数据源格式和搜索算法 自己定义搜索相比还是比較复杂,须要我们思考比較多. Android自带的搜索方法: 1.创建一个搜索对话框配置文件 2.创建一个可用于搜索的Acitivity和运行搜