前端实现搜索记录功能
代码乱掉了。。。移步
得益于H5的API,前端可以很方便的存储数据,除了cookie,新增的sessionStorage、localStorage可以在用户本地存储数据,这可以让前端实现一些,以前只能有数据库存储的功能。
搜索记录可以用前端实现,由于这些数据没有特别安全的要求,用户搜索过的关键词保存在用户本地是完全可以的。这样做也可以减少服务器的压力。
搜索记录应该采用localStorage永久的存储,当用户下次访问的时候,这个数据还在。
下面的例子是手机端网页,布局比较粗糙,除了替换搜索的按钮图片。其他的功能都正常。
主要思路:在向localStorage存储的时候,以点击搜索的时间戳为key,以搜索的词语为value.最多存储6条数据。当超过6条,会删除最早的记录。
localStorage的存储是有顺序的,最先存的会在最底下。
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>1元许愿</title><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="no"><meta name="apple-mobile-web-app-status-bar-style" content="black"><meta name="format-detection" content="telephone=no">
<style>
.text-center{text-align:center;}
.box{display:-webkit-box;display:box;}
#idNumber1{width:80%;overflow:hidden;text-align:left;display:block;max-height:100%;border:1px solid #0C0;}
.his-record:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;} {}
.his-record>div{float:left;width:31%;margin:0.5rem 1%;padding:5px 6%;border-radius:3px;border:1px solid #999;color:#999;}</style>
</head>
<body><section><div class="box" style="border-radius:5px;"><form id="form1" method="get" action="http://www.baidu.com" style="width:80%"><input class="" id="idNumber1"></form><div style="width:20%;background:url(../assets/images/yy/search.jpg) no-repeat right;background-size:contain;" id="search"></div></div></section><section class="his-record text-center"></section><!--清空历史记录--><section style="position:fixed;bottom:70px;width:100%;"><div class="font-brown text-center" style="border:2px solid #834f1b;padding:3px 15px;margin:0 auto;width:40%;" id="his-dele">清空搜索记录</div></section>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>$(document).delegate(".his-record>div","click",function(){$("#idNumber1").val($(this).text()); });/*搜索记录相关*///从localStorage获取搜索时间的数组var hisTime;//从localStorage获取搜索内容的数组var hisItem;//从localStorage获取最早的1个搜索时间var firstKey;function init (){//每次执行都把2个数组置空hisTime = [];hisItem = [];//模拟localStorage本来有的记录localStorage.setItem("a",12333);//本函数内的两个for循环用到的变量var i=0for(;i<localStorage.length;i++){//alert(typeof(localStorage.key(i)));if(!isNaN(localStorage.key(i))){//hisItem.push(localStorage.getItem(localStorage.key(i)));hisTime.push(localStorage.key(i));}} hisTime.sort(); for(var y=hisTime.length;y>-1;y--){ hisItem.push(localStorage.getItem(hisTime[y])); }
//alert("hisTime:"+hisTime); //alert("hisItem:"+hisItem) i=0; //执行init(),每次清空之前添加的节点 $(".his-record").html(""); for(;i<hisItem.length;i++){ //alert(hisItem); $(".his-record").prepend('<div class="word-break">'+hisItem[i]+'</div>') } // bindListener(); } init(); $("#search").click(function(){ var value = $("#idNumber1").val(); var time = (new Date()).getTime(); if(!value){ alert("你未输入搜索内容"); return false; } //输入的内容localStorage有记录 if($.inArray(value,hisItem)>=0){ for(var j = 0;j<localStorage.length;j++){ if(value==localStorage.getItem(localStorage.key(j))){ localStorage.removeItem(localStorage.key(j)); } } localStorage.setItem(time,value); } //输入的内容localStorage没有记录 else{ //由于限制了只能有6条记录,所以这里进行判断 if(hisItem.length>5){ firstKey = hisTime[0] localStorage.removeItem(firstKey); localStorage.setItem(time,value); }else{ localStorage.setItem(time,value) } } init(); //正式的时候要提交的!!! //$("#form1").submit() }); //清除记录功能 $("#his-dele").click(function(){ var f = 0; for(;f<hisTime.length;f++){ localStorage.removeItem(hisTime[f]); } /* for(var i=0;i<localStorage.length;i++){ localStorage.removeItem(localStorage.key(i)); }*/ init(); }); </script> </body> </html>
代码分析参见下篇博客
预览如下:
转载于:https://www.cnblogs.com/xiaochongchong/p/5803784.html
前端实现搜索记录功能相关推荐
- App开发-使用Vue3+Vant组件实现历史搜索记录功能
使用Vue3+Vant组件实现App历史搜索记录功能 最近在开发一款新的app项目,我自己也是第一次接触app开发,经过团队的一段时间研究调查,决定使用Vue3+Vant前端组件的模式进行开发,vue ...
- 工作中搜索页面搜索记录功能的封装(存储到本地)
//!*封装添加搜索记录功能 (newRecord:str,当参数为空时为获取历史记录; num:记录数,默认为12条;) function addHisRecord(newRecord, num){ ...
- android 利用数据库实现历史搜索记录功能
最近在一个项目中使用到了搜索功能,特来此记录一下 本篇博文需要用到的知识点: 1.RecyclerView的简单操作 2.本地数据库的简单操作 3.ScrollView与RecyclerView的滑动 ...
- 小程序 搜索记录功能实现
实现样式 在JS中设置初始值 data: {inputVal: '',searchRecord: []}, 搜索历史 获取缓存 openHistorySearch: function () {this ...
- Android开源实战:简单好用、含历史搜索记录的智能搜索框
前言 Android开发中,类似下图的搜索功能非常常见 今天,我将带来一款 封装了 历史搜索记录功能 & 样式 的Android 自定义搜索框 开源库,希望你们会喜欢. 已在Github开源: ...
- Android常用:手把手教你实现搜索框(含历史搜索记录)
http://blog.csdn.net/carson_ho/article/details/53366570 前言 像下图的搜索功能在Android开发中非常常见 今天我将手把手教大家如何实现具备历 ...
- Android开源实战:SearchView搜索框(含历史搜索记录)
前言 Android开发中,类似下图的搜索功能非常常见 搜索功能 今天,我将手把手教大家实现一款 封装了 历史搜索记录功能 & 样式 的Android 自定义搜索框 开源库,希望你们会喜欢. ...
- 百万前端之VUE 2.X + vant 实现关键字搜索内容 搜索记录、热搜
在前端工作中,一般对于展示数据量比较多的页面来说,都是需要一个搜索功能来给予用户更优质的体验:这次展示的例子来源于我的工作中的摘录.插件安装就不多说了,各位大佬一个都懂npm install了吧. 下 ...
- 前端实现搜索功能和模糊查询
前端实现搜索功能和模糊查询 功能介绍: 在前端实现搜索,获取数据部分可以用ajax来实现,动态生成li标签,正则表达式实现的模糊查询 js实现代码: // $("#BA_2307596970 ...
最新文章
- chrome浏览器下“多余”的2px
- bzoj 2878 [Noi2012]迷失游乐园——树上的期望dp
- 用图表说话 麦肯锡 pdf下载_揭秘麦肯锡顾问百万年薪背后的逻辑,麦肯锡「方法论」系列大合集...
- 2018年,牛客网小白月赛5
- UVA 11584 Partitioning by Palindromes (字符串区间dp)
- 用电脑更新手机ios系统_macOS 11正式版:大更新!苹果把iOS风格搬到了电脑上
- selinux-setroubleshoot安装及详解
- 谷歌开源的代码评审规范,值得借鉴!
- Layer 提示框tips使用(批量提示)
- 小白 白嫖7天百度云网盘会员,高速下载
- Java ssm框架是什么?
- html搜索框点击出现提示,js实现搜索提示框效果
- 按发动机排量征收汽车消费税是不合理的,应该按燃烧室容积征税
- spa计算机技术,Spathis, Promethee
- php中空格怎么表示什么,HTML中的空格符号是什么
- Buuctf rar
- A Bluescreen By Any Other Color
- Spark SQL的selectExpr用法
- 小 Biu 的旅行(dfs)
- 编译原理学习(二)--终结符和非终结符