js实现前端的搜索历史记录

2023-03-22 01:51| 来源: 网络整理| 查看: 265

最近在对接前台页面(WEB端)时,产品要求需记录下客户的搜索记录,我们是前后台完全分离的项目,根本不能保存的session域中,没办法,虽然作为后台开发,遇到需求就自己研究了一通,先看一下最终效果图,记录每次的搜索记录,上限为10个,自动去重,点击搜索,跳转搜索结果页面

开始上前端代码

搜索页面,css和js接口部分就不上传了,毕竟只看搜索

DOCTYPE html> input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; } .weui-dialog { background-color: #e5e5e5; } 搜索搜索历史记录山东省妇幼保健院宝宝摔倒应该怎么办妇幼宝贝合作泰安市妇幼保健院 $(function() { /*清楚搜索历史记录*/ $(".search-title span").click(function() { $.confirm("是否要清空搜索历史记录", function() { //点击确认后的回调函数 $(".search-list").find("li").remove(); //$(".search-title").hide(); localStorage.removeItem('search'); }, function() { //点击取消后的回调函数 $.closeModal(); //关闭对话框 }); /* $.alert("是否要清空搜索历史记录",function(){ $(".search-list").find("li").remove(); //$(".search-title").hide(); localStorage.removeItem('search'); })*/ }) /*搜索*/ $("#serachTxt").bind("search", function() { var keyword = $("#serachTxt").val(); var userId = sanmi.queryParam("userId"); var platform= sanmi.queryParam("platform"); window.location.href = "search-result.html?keyword=" + encodeURI(encodeURI(keyword))+"&userId="+userId+"&platform="+platform; }) /*搜索取消*/ $("#serachTxt").focus(function () { $(".searchCancel").show(); })/*.blur(function () { $(".searchCancel").hide(); })*/ $(".searchCancel").click(function() { $("#serachTxt").val(""); }) var searchArr; //定义一个search的，判断浏览器有无数据存储（搜索历史） if(localStorage.search){ //如果有，转换成数组的形式存放到searchArr的数组里（localStorage以字符串的形式存储，所以要把它转换成数组的形式） searchArr= localStorage.search.split(",") }else{ //如果没有，则定义searchArr为一个空的数组 searchArr = []; } //把存储的数据显示出来作为搜索历史 MapSearchArr(); function MapSearchArr(){ // debugger; var tmpHtml = ""; var userId = sanmi.queryParam("userId"); var platform= sanmi.queryParam("platform"); for (var i=0;iDOCTYPE html> input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; } $(function () { tupian(); console.info($(".new-item5 .l-first-tus figure").width($("html,body").width()-20)); }) function tupian(){ $(".new-item5 .l-first-tus figure").height($(".new-item5 .l-first-tus figure").width() * 0.58); $.each($(".l-first-tus figure"), function(i, e) { $(e).height($(e).width() *0.66); }); } 搜索搜索 {{each info as ifo}} {{if ifo.coverPositionFlag == "THREE_LIST"}} {{if ifo.haiArticleType == "IMAGE"}} {{ifo.haiTitle}} {{if ifo.coverImageList.length == 0}} {{else if ifo.coverImageList.length == 1}} {{each ifo.coverImageList as image}} {{/each}} {{else if ifo.coverImageList.length == 2}} {{each ifo.coverImageList as image}} {{/each}} {{else}} {{each ifo.coverImageList as image}} {{/each}} {{/if}} +{{ifo.normalImageCount}} {{if ifo.ownOrgName !=""}} {{ifo.ownName}}-{{ifo.ownOrgName}} {{else}} {{ifo.ownName}} {{/if}} {{ifo.formatReadCount}}阅读 {{ifo.commentCount}}评论 {{else}} {{ifo.haiTitle}} {{if ifo.coverImageList.length == 0}} {{else if ifo.coverImageList.length == 1}} {{each ifo.coverImageList as image}} {{/each}} {{else if ifo.coverImageList.length == 2}} {{each ifo.coverImageList as image}} {{/each}} {{else}} {{each ifo.coverImageList as image}} {{/each}} {{/if}} {{if ifo.ownOrgName !=""}} {{ifo.ownName}}-{{ifo.ownOrgName}} {{else}} {{ifo.ownName}} {{/if}} {{ifo.formatReadCount}}阅读 {{ifo.commentCount}}评论 {{/if}} {{/if}} {{if ifo.coverPositionFlag == "SMALL_RIGHT"}} {{if ifo.haiArticleType == "VIDEO"}} {{ifo.haiTitle}} {{if ifo.coverImageList.length == 0}} {{ifo.videoLengthStr}} {{else }} {{each ifo.coverImageList as image}} {{/each}} {{ifo.videoLengthStr}} {{/if}} {{if ifo.ownOrgName !=""}} {{ifo.ownName}}-{{ifo.ownOrgName}} {{else}} {{ifo.ownName}} {{/if}} {{ifo.formatReadCount}}阅读 {{ifo.commentCount}}评论 {{else if ifo.haiArticleType == "RICH_TEXT"}} {{ifo.haiTitle}} {{each ifo.coverImageList as image}} {{/each}} {{ifo.ownName}} {{ifo.formatReadCount}}阅读 {{ifo.commentCount}}评论 {{else }} {{ifo.haiTitle}} {{each ifo.coverImageList as image}} {{/each}} {{if ifo.ownOrgName !=""}} {{ifo.ownName}}-{{ifo.ownOrgName}} {{else}} {{ifo.ownName}} {{/if}} {{ifo.formatReadCount}}阅读 {{ifo.commentCount}}评论 {{/if}} {{/if}} {{if ifo.coverPositionFlag == "BIG_CENTER"}} {{if ifo.haiArticleType == "VIDEO"}} {{ifo.haiTitle}} {{if ifo.coverImageList.length == 0}} {{else}} {{each ifo.coverImageList as image}} {{/each}} {{/if}} {{ifo.videoLengthStr}} {{if ifo.ownOrgName !=""}} {{ifo.ownName}}-{{ifo.ownOrgName}} {{else}} {{ifo.ownName}} {{/if}} {{ifo.formatReadCount}}阅读 {{ifo.commentCount}}评论 {{else if ifo.haiArticleType == "IMAGE"}} {{ifo.haiTitle}} {{if ifo.coverImageList.length == 0}} {{else}} {{each ifo.coverImageList as image}} {{/each}} {{/if}} {{if ifo.ownOrgName !=""}} {{ifo.ownName}}-{{ifo.ownOrgName}} {{else}} {{ifo.ownName}} {{/if}} {{ifo.formatReadCount}}阅读 {{ifo.commentCount}}评论 {{else}} {{ifo.haiTitle}} {{each ifo.coverImageList as image}} {{/each}} {{if ifo.ownOrgName !=""}} {{ifo.ownName}}-{{ifo.ownOrgName}} {{else}} {{ifo.ownName}} {{/if}} {{ifo.formatReadCount}}阅读 {{ifo.commentCount}}评论 {{/if}} {{/if}} {{/each}} $(function() { /*搜索*/ $("#serachTxt").bind("search", function() { //事件 var keyword = $("#serachTxt").val(); var userId = sanmi.queryParam("userId"); var platform= sanmi.queryParam("platform"); window.location.href = "search-result.html?keyword=" + encodeURI(encodeURI(keyword))+"&userId="+userId+"&platform="+platform; }) /*搜索取消*/ $("#serachTxt").focus(function () { $(".searchCancel").show(); }).blur(function () { $(".searchCancel").hide(); $("#serachTxt").val(""); }) $(".searchCancel").click(function() { $("#serachTxt").val(""); }) var searchArr; //定义一个search的，判断浏览器有无数据存储（搜索历史） if(localStorage.search){ //如果有，转换成数组的形式存放到searchArr的数组里（localStorage以字符串的形式存储，所以要把它转换成数组的形式） searchArr= localStorage.search.split(",") }else{ //如果没有，则定义searchArr为一个空的数组 searchArr = []; } var keyword = $("#serachTxt").val() //点击搜索按钮时，去重 if(keyword != ""){ KillRepeat(keyword); } //去重后把数组存储到浏览器localStorage localStorage.search = searchArr; //去重 function KillRepeat(val){ // var kill = 0; for (var i=0;i

【本文地址】

公司简介

联系我们