js实现前端的搜索历史记录
最近在对接前台页面(WEB端)时,产品要求需记录下客户的搜索记录,我们是前后台完全分离的项目,根本不能保存的session域中,没办法,虽然作为后台开发,遇到需求就自己研究了一通,先看一下最终效果图,记录每次的搜索记录,上限为10个,自动去重,点击搜索,跳转搜索结果页面
开始上前端代码
搜索页面,css和js接口部分就不上传了,毕竟只看搜索
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="expires" content="60"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport" /> <title></title> <link rel="stylesheet" href="/resources/css/sm.min.css" /> <link rel="stylesheet" href="/resources/css/reset.css" /> <link rel="stylesheet" href="/resources/css/css.css" /> <script type="text/javascript" src="/resources/js/jquery1.11.3.min.js"></script> <script type="text/javascript" src="/resources/js/zepto.min.js"></script> <script type="text/javascript" src="/resources/base/httpClient.js"></script> <script type="text/javascript" src="/resources/js/sm.min.js"></script> <!--弹窗实现--> <link rel="stylesheet" href="/resources/css/weui.min.css"/> <link rel="stylesheet" href="/resources/css/jquery-weui.min.css"/> <script type="text/javascript" src="/resources/js/jquery-weui.min.js"></script> <style> input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; } </style> <style> .weui-dialog { background-color: #e5e5e5; } </style> </head> <body> <div class="page"> <header class="bar bar-nav head-bg"> <a href="javascript:;" class="icon icon-left pull-left" onclick="window.history.back();"></a> <h1 class="title">搜索</h1> </header> <div class="content" style="background:#fff"> <article class="search-b"> <img src="/resources/images/sousuo.png"> <form action='' onsubmit="return false;"> <input type="search" placeholder="输入想搜索内容的关键词" id="serachTxt" maxlength="30"> <img src="/resources/images/searchCancel.png" class="searchCancel"> </form> <a href="javascript:;" class="searchBtn" onclick="searchResult()">搜索</a> </article> <p class="search-title">历史记录<span><img src="/resources/images/del.png"></span></p> <ul class="search-list"> <li> <a href="javascript:;">山东省妇幼保健院</a> </li> <li> <a href="javascript:;">宝宝摔倒应该怎么办</a> </li> <li> <a href="javascript:;">妇幼宝贝合作</a> </li> <li> <a href="javascript:;">泰安市妇幼保健院</a> </li> </ul> </div> </div> <script> $(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;i<searchArr.length;i++){ tmpHtml += "<li><a href='/view/search-result.html?keyword="+encodeURI(encodeURI(searchArr[i]))+"&userId="+userId+"&platform="+platform+"'>"+searchArr[i]+"</a> </li>" } $(".search-list").html(tmpHtml); } }) function searchResult() { var userId = sanmi.queryParam("userId"); var cityCode = sanmi.queryParam("cityCode"); //第三方访问的链接 var platform= sanmi.queryParam("platform"); var keyword = $("#serachTxt").val() window.location.href = "/view/search-result.html?keyword=" + encodeURI(encodeURI(keyword)+"&platform="+platform); } </script> </body> </html>
搜索结果页面,对你们看的没错,用的就是artTemplate模版,让我一个后台去对接接口...哼哼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="expires" content="60"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=0" name="viewport" /> <title></title> <!--<link rel="stylesheet" href="/resources/css/sm.min.css" />--> <link rel="stylesheet" href="/resources/css/reset.css" /> <link rel="stylesheet" href="/resources/css/css.css" /> <script type="text/javascript" src="/resources/js/jquery1.11.3.min.js"></script> <script type="text/javascript" src="/resources/js/image-auto.js"></script> <script type="text/javascript" src="/resources/js/zepto.min.js"></script> <!--<script type="text/javascript" src="/resources/js/sm.min.js"></script>--> <script type="text/javascript" src="/resources/base/httpClient.js"></script> <script type="text/javascript" src="/resources/listjs/search_result.js"></script> <script type="text/javascript" src="/resources/js/template.js"></script> <style> input[type=search]::-webkit-search-cancel-button{ -webkit-appearance: none; } </style> <script> $(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); }); } </script> </head> <body> <div class="page"> <div class="fixed-idx"> <header class="bar bar-nav head-bg"> <a href="javascript:;" class="black_icon" onclick="window.history.back();"><img src="/resources/images/black-icon.png"></a> <h1 class="title">搜索</h1> </header> </div> <article class="search-b" style="margin-top:2.2rem"> <img src="/resources/images/sousuo.png"> <form action='' onsubmit="return false;"> <input type="search" placeholder="输入想搜索内容的关键词" id="serachTxt" style="width:100%"> <img src="/resources/images/searchCancel.png" class="searchCancel" style="right: 0.2rem"> </form> <a href="javascript:;" class="searchBtn" onclick="searchResult()">搜索</a> </article> <div class="line-con" style="border-top:1px solid #f0f0f0" id="content"> <script id="floorList" type="text/html"> {{each info as ifo}} {{if ifo.coverPositionFlag == "THREE_LIST"}} {{if ifo.haiArticleType == "IMAGE"}} <article class="new-item4"> <a href="/view/detail.html?articleId={{ifo.haiId}}"> <h5 class="h">{{ifo.haiTitle}}</h5> </a> <div class="more-tus"> <div class="l-first-tus my-gallery"> {{if ifo.coverImageList.length == 0}} <figure> <div class="img-dv"> <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}"> <img src="/resources/images/toutiao_mrt1.png" onload="resize_img(this)"> </a> </div> </figure> <figure> <div class="img-dv"> <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}"> <img src="/resources/images/toutiao_mrt1.png" onload="resize_img(this)"> </a> </div> </figure> <figure> <div class="img-dv"> <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}"> <img src="/resources/images/toutiao_mrt1.png" onload="resize_img(this)"> </a> </div> </figure> {{else if ifo.coverImageList.length == 1}} {{each ifo.coverImageList as image}} <figure> <div class="img-dv"> <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}"> <img src="{{image.url}}" onload="resize_img(this)"> </a> </div> </figure> {{/each}} <figure> <div class="img-dv"> <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}"> <img src="/resources/images/toutiao_mrt1.png" onload="resize_img(this)"> </a> </div> </figure> <figure> <div class="img-dv"> <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}"> <img src="/resources/images/toutiao_mrt1.png" onload="resize_img(this)"> </a> </div> </figure> {{else if ifo.coverImageList.length == 2}} {{each ifo.coverImageList as image}} <figure> <div class="img-dv"> <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}"> <img src="{{image.url}}" onload="resize_img(this)"> </a> </div> </figure> {{/each}} <figure> <div class="img-dv"> <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}"> <img src="/resources/images/toutiao_mrt1.png" onload="resize_img(this)"> </a> </div> </figure> {{else}} {{each ifo.coverImageList as image}} <figure> <div class="img-dv"> <a class="item-span" data-size="" href="detail.html?articleId={{ifo.haiId}}"> <img src="{{image.url}}" onload="resize_img(this)"> </a> </div> </figure> {{/each}} {{/if}} </div> <span>+{{ifo.normalImageCount}}</span> </div> <p class="fo"> {{if ifo.ownOrgName !=""}} <span>{{ifo.ownName}}-{{ifo.ownOrgName}}</span> {{else}} <span>{{ifo.ownName}}</span> {{/if}} <span name="count">{{ifo.formatReadCount}}阅读</span> <span>{{ifo.commentCount}}评论</span> </p> </article> {{else}} <article class="new-item"> <a href="/view/detail1.html?articleId={{ifo.haiId}}"> <h5 class="h">{{ifo.haiTitle}}</h5> <div class="l-first-tus"> {{if ifo.coverImageList.length == 0}} <figure style="background-image: url(/resources/images/toutiao_mrt1.png);"></figure> <figure style="background-image: url(/resources/images/toutiao_mrt1.png);"></figure> <figure style="background-image: url(/resources/images/toutiao_mrt1.png);"></figure> {{else if ifo.coverImageList.length == 1}} {{each ifo.coverImageList as image}} <figure style="background-image: url({{image.url}});"></figure> {{/each}} <figure style="background-image: url(/resources/images/toutiao_mrt1.png);"></figure> <figure style="background-image: url(/resources/images/toutiao_mrt1.png);"></figure> {{else if ifo.coverImageList.length == 2}} {{each ifo.coverImageList as image}} <figure style="background-image: url({{image.url}});"></figure> {{/each}} <figure style="background-image: url(/resources/images/toutiao_mrt1.png);"></figure> {{else}} {{each ifo.coverImageList as image}} <figure style="background-image: url({{image.url}});"></figure> {{/each}} {{/if}} </div> </a> <p class="fo"> {{if ifo.ownOrgName !=""}} <span>{{ifo.ownName}}-{{ifo.ownOrgName}}</span> {{else}} <span>{{ifo.ownName}}</span> {{/if}} <span name="count">{{ifo.formatReadCount}}阅读</span> <span>{{ifo.commentCount}}评论</span> </p> </article> {{/if}} {{/if}} <!-- 小图靠右--> {{if ifo.coverPositionFlag == "SMALL_RIGHT"}} {{if ifo.haiArticleType == "VIDEO"}} <article class="new-item2"> <a href="/view/detail2.html?articleId={{ifo.haiId}}"> <div class="item-d"> <h5 class="h">{{ifo.haiTitle}}</h5> {{if ifo.coverImageList.length == 0}} <div class="item-s-cover"> <figure style="background-image: url(/resources/images/toutiao_mrt1.png);" class="l-first-tus"></figure> <span class="video-len">{{ifo.videoLengthStr}}</span> </div> {{else }} <div class="item-s-cover"> {{each ifo.coverImageList as image}} <figure style="background-image: url({{image.url}});" class="l-first-tus"></figure> {{/each}} <span class="video-len">{{ifo.videoLengthStr}}</span></div> {{/if}} </div> </a> <p class="fo"> {{if ifo.ownOrgName !=""}} <span>{{ifo.ownName}}-{{ifo.ownOrgName}}</span> {{else}} <span>{{ifo.ownName}}</span> {{/if}} <span name="count">{{ifo.formatReadCount}}阅读</span> <span>{{ifo.commentCount}}评论</span> </p> </article> {{else if ifo.haiArticleType == "RICH_TEXT"}} <article class="new-item2"> <a href="/view/detail1.html?articleId={{ifo.haiId}}"> <div class="item-d"> <h5 class="h">{{ifo.haiTitle}}</h5> <div class="item-s-cover"> {{each ifo.coverImageList as image}} <figure style="background-image: url({{image.url}});" class="l-first-tus"></figure> {{/each}} </div> </div> </a> <p class="fo"> <span>{{ifo.ownName}}</span> <span name="count">{{ifo.formatReadCount}}阅读</span> <span>{{ifo.commentCount}}评论</span> </p> </article> {{else }} <article class="new-item2"> <a href="/view/detail.html?articleId={{ifo.haiId}}"> <div class="item-d"> <h5 class="h">{{ifo.haiTitle}}</h5> <div class="item-s-cover"> {{each ifo.coverImageList as image}} <figure style="background-image: url({{image.url}});" class="l-first-tus"></figure> {{/each}} </div> </div> </a> <p class="fo"> {{if ifo.ownOrgName !=""}} <span>{{ifo.ownName}}-{{ifo.ownOrgName}}</span> {{else}} <span>{{ifo.ownName}}</span> {{/if}} <span name="count">{{ifo.formatReadCount}}阅读</span> <span>{{ifo.commentCount}}评论</span> </p> </article> {{/if}} {{/if}} <!-- 大图居中--> <!-- 视频类--> {{if ifo.coverPositionFlag == "BIG_CENTER"}} {{if ifo.haiArticleType == "VIDEO"}} <article class="new-item3"> <a href="/view/detail2.html?articleId={{ifo.haiId}}"> <div class="item-d"> <h5 class="h">{{ifo.haiTitle}}</h5> <!-- 大图居中 可能为视频和图片--> <div class="item-video"> {{if ifo.coverImageList.length == 0}} <figure style="background-image: url(/resources/images/toutiao_mrt1.png);" class="l-first-tus"></figure> {{else}} {{each ifo.coverImageList as image}} <figure style="background-image: url({{image.url}});" class="l-first-tus"></figure> {{/each}} {{/if}} <img src="/resources/images/bofang.png" class="bf-btn"> <span class="video-len">{{ifo.videoLengthStr}}</span> </div> </div> </div> </a> <p class="fo"> {{if ifo.ownOrgName !=""}} <span>{{ifo.ownName}}-{{ifo.ownOrgName}}</span> {{else}} <span>{{ifo.ownName}}</span> {{/if}} <span name="count">{{ifo.formatReadCount}}阅读</span> <span>{{ifo.commentCount}}评论</span> </p> </article> <!-- 大图居中 图片类--> {{else if ifo.haiArticleType == "IMAGE"}} <article class="new-item5"> <a href="/view/detail.html?articleId={{ifo.haiId}}"> <h5 class="h">{{ifo.haiTitle}}</h5> <div class="more-tus"> <div class="l-first-tus my-gallery"> {{if ifo.coverImageList.length == 0}} <figure> <div class="img-dv"> <img src="/resources/images/toutiao_mrt1.png" onload="resize_img(this)" /> <!-- </a>--> </div> </figure> {{else}} {{each ifo.coverImageList as image}} <figure> <div class="img-dv"> <img src="{{image.url}}" onload="resize_img(this)" /> <!-- </a>--> </div> </figure> {{/each}} {{/if}} </div> <!-- <span>+10</span>--> </div> </a> <p class="fo"> {{if ifo.ownOrgName !=""}} <span>{{ifo.ownName}}-{{ifo.ownOrgName}}</span> {{else}} <span>{{ifo.ownName}}</span> {{/if}} <span name="count">{{ifo.formatReadCount}}阅读</span> <span>{{ifo.commentCount}}评论</span> </p> </article> {{else}} <article class="new-item5"> <a href="/view/detail1.html?articleId={{ifo.haiId}}"> <h5 class="h">{{ifo.haiTitle}}</h5> <div class="more-tus"> <div class="l-first-tus my-gallery"> {{each ifo.coverImageList as image}} <figure> <div class="img-dv"> <img src="{{image.url}}" onload="resize_img(this)" /> <!-- </a>--> </div> </figure> {{/each}} </div> <!-- <span>+10</span> --> </div> </a> <p class="fo"> {{if ifo.ownOrgName !=""}} <span>{{ifo.ownName}}-{{ifo.ownOrgName}}</span> {{else}} <span>{{ifo.ownName}}</span> {{/if}} <span name="count">{{ifo.formatReadCount}}阅读</span> <span>{{ifo.commentCount}}评论</span> </p> </article> {{/if}} {{/if}} {{/each}} </script> </div> </div> <script> $(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<searchArr.length;i++){ if(val===searchArr[i]){ // kill ++; 用来删除数据 searchArr.splice(i,1); } } //默认显示10条数据 if(searchArr.length <10){ searchArr.unshift(val); }else{ //删除数组的最后一个元素 searchArr.pop() //在数组首位添加元素 searchArr.unshift(val); } } }) function searchResult() { var userId = sanmi.queryParam("userId"); var keyword = sanmi.queryParam("keyword"); console.log(keyword); var platform= sanmi.queryParam("platform"); window.location.href = "search-result.html?keyword=" + keyword+"&platform="+platform; } </script> </body> </html>
效果一开始就上传了,就酱......
