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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>1元许愿</title>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta content="no">
<meta content="black">
<meta content="telephone=no">
<style>
.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;
}
</style>
</head>
<body>
<input>

<button>按钮</button>

<div>
</div>

<div>X</div>


<script src="js/jquery-3.1.1.min.js"></script>
<script>
$(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<localStorage.length;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<hisItem.length;i++){
//alert(hisItem);
$(".delete").prepend('<divstyle=" z-index: 1000;">'+hisItem[i]+'</div>')
}
}
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>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<hisTime.length;f++){
localStorage.removeItem(hisTime[f]);
}
init();
});
//苹果手机不兼容出现input无法取值以下是解决方法
$(function(){
$('.word-break').click(function(){
var div = $(this).text();
$('#idNumber1').val(div);
})
//取到值以后button存储无法取值，这里强迫浏览器强行刷新可解决
$('#search').click(function(){
window.location.reload();
})
})
</script>
</body>
</html>
此文不是本人原创，当本人需要做这个项目时候搜到的一篇好文章简单粗暴快捷，但也有不足之处就是最后俩点一是苹果不兼容代码问题二是input取值问题，这是是本人修改之后代码。
如有同学遇到需要做存储类项目欢迎参考，就是这样。没毛病!老铁。。。。。