首页 > 代码库 > 工作中搜索页面搜索记录功能的封装(存储到本地)
工作中搜索页面搜索记录功能的封装(存储到本地)
//!*封装添加搜索记录功能 (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)); }
工作中搜索页面搜索记录功能的封装(存储到本地)
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。