html5 保存 搜索历史,前端实现搜索记录功能也就是天猫app历史记录存储方便浏览 - 今天的代码你撸了嘛...

HTML5技术

前端实现搜索记录功能也就是天猫app历史记录存储方便浏览 - 今天的代码你撸了嘛

字号+

作者：H5之家 2017-04-12 14:00

得益于H5的API，前端可以很方便的存储数据，除了cookie，新增的sessionStorage、localStorage可以在用户本地存储数据，这可以让前端实现一些，以前只能有数据库存储的功能。 搜索记录可以用前端实现，由于这些数据没有特别安全的要求，用户搜索过的关键词保

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

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

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

下面的例子是手机端网页，布局比较粗糙，除了替换搜索的按钮图片。其他的功能都正常。

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

1元许愿

.history{

text-align:center;

}

#idNumber1{

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: 19%;

border: 1px solid #ccc;

background: #E0E0E0;

}

#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;

}

按钮

X

$(document).delegate(".delete>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=0

for(;i

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

hisItem.push(localStorage.getItem(localStorage.key(i)));

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

}

}

i=0;

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

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

for(;i

//alert(hisItem);

$(".delete").prepend(''+hisItem[i]+'

')