Android仿淘宝历史搜索功能,使用localStorage实现历史记录搜索功能也便是天猫app历史记录存储方便浏览...

使用localStorage实现历史记录搜索功能也就是天猫app历史记录存储方便浏览

得益于H5的API，前端可以很方便的存储数据，除了cookie，新增的sessionStorage、localStorage可以在用户本地存储数据，这可以让前端实现一些，以前只能有数据库存储的功能。

搜索记录可以用前端实现，由于这些数据没有特别安全的要求，用户搜索过的关键词保存在用户本地是完全可以的。这样做也可以减少服务器的压力。

搜索记录应该采用localStorage永久的存储，当用户下次访问的时候，这个数据还在。

下面的例子是手机端网页，布局比较粗糙，功能都正常。

主要思路：在向localStorage存储的时候，以点击搜索的时间戳为key，以搜索的词语为value.最多存储5条数据。当超过5条，会删除最早的记录。

.history{

text-align:center;

}

#sec{

width:50%;

overflow:hidden;

text-align:left;

height:38px;

border:1px solid #ccc;

border-radius: 10px;

}

.delete:after{

clear:both;content:'.';

display:block;

width: 0;

height: 0;

visibility:hidden;

}

.delete>div {

border-radius: 50px;

float: left;

/*width: 25%;*/

height: 23px;

border: 1px solid #ccc;

background: #E0E0E0;

margin-top: 14px;

margin-right: 10px;

overflow:hidden;

}

#search{

width: 141px;

height: 37px;

font-size: 14px;

line-height: 14px;

color: #959595;

padding-bottom: 2px;

}

#his-dele{

width: 22px;

height: 22px;

line-height: 22px;

display: inline-block;

background: #E0E0E0;

color: #fff;

border-radius: 50%;

text-align: center;

margin-left:10px;

float: right;

position: relative;

top: -26px;

}

.current{

}

按钮

$(document).delegate(".delete>div","click",function(){

$("#sec").val($(this).text());

});

/*搜索记录相关*/

//从localStorage获取搜索时间的数组

var hisTime;

//从localStorage获取搜索内容的数组

var hisItem;

//从localStorage获取最早的1个搜索时间

var firstKey;

function init (){

//每次执行都把2个数组置空

hisTime = [];

hisItem = [];

//模拟localStorage本来有的记录

//localStorage.setItem("b",12333);

//本函数内的两个for循环用到的变量

var i=0

for(;i

if(!isNaN(localStorage.key(i))){

hisTime.push(localStorage.key(i));

}

}

//有空格bug

// if(hisTime.length>0) {

// hisTime.sort();

// for (var y = hisTime.length-1; y > 0; y--) {

// hisItem.push(localStorage.getItem(hisTime[y]));

// }

// }

// 取到的是历史记录如果不是空格，先取再存到数组里

if(hisTime.length>0) {

hisTime.sort();

for (var y = hisTime.length-1; y>0; y--) {

localStorage.getItem(hisTime[y]).trim()&&hisItem.push(localStorage.getItem(hisTime[y]));

}

}

i=0;

//执行init(),每次清空之前添加的节点

$(".delete").html("");

for(;i

//alert(hisItem);

$(".delete").prepend('

}

}

init();

$("#search").click(function(){

var value = $("#sec").val();

var time = (new Date()).getTime();

if(!value){

alert("你未输入搜索内容");

return false;

}

//输入的内容localStorage有记录

if($.inArray(value,hisItem)>=0){

for(var j = 0;j

if(value==localStorage.getItem(localStorage.key(j))){

localStorage.removeItem(localStorage.key(j));

}

}

localStorage.setItem(time,value);

}

//输入的内容localStorage没有记录

else{

//由于限制了只能有6条记录，所以这里进行判断

if(hisItem.length>4){

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

localStorage.removeItem(hisTime[f]);

}

init();

window.location.reload();

});

//苹果手机不兼容出现input无法取值以下是解决方法

$(function(){

$('.word-break').click(function(){

var div = $(this).text();

$('#sec').val(div);

})

//取到值以后button存储无法取值，这里强迫浏览器强行刷新可解决

$('#search').click(function(){

window.location.reload();

})

})

//存储数据默认隐藏获取焦点显示

$('#sec').focus(function(){

$('.word-break').css('display','block');

})

//这里判断本地浏览器是否有离线存储记录苹果浏览器不支持localStorage.length

// if(localStorage.length == 0) {

// $(".Storage").html('无存储记录');

// }

//通过DOM查找插入的记录如果有显示空反之显示无记录

if($(".delete").children().hasClass("word-break")){

//alert("hi");

$(".Storage").html('')

}else{

$(".Storage").html('无存储记录');

}

此文不是本人原创，当本人需要做这个项目时候搜到的一篇好文章简单粗暴快捷，但也有不足之处就是一是苹果不兼容代码问题二是input取值问题等等一些需要完善的效果，这是是本人修改之后代码。

兼容pc和移动端，如有同学遇到需要做存储类项目欢迎参考，就是这样粘贴复制。没毛病!老铁。。。。。拿走不谢1楼你是千堆雪不是这个能干啥啊想问？Re: 今天的代码你撸了嘛@你是千堆雪，这个可以存储用户搜索的记录然后出现在搜索框下面，然后下次打开浏览器可以查阅之前的记录也就是这几个小框框，提高客户体验，天猫的app就有这个功能你可以去体验试试你就知道了，本地存储常见的效果