服务热线 400-660-8066
石家庄网站建设
localStorag是在HTML5中，新加入的一个特性，localStorage主要是用来作为本地存储来使用的，用来解决cookie存储空间不足的问题，因为cookie中每条cookie的存储空间为4k，但是localStorage在一般浏览器中支持的是5M大小，这个大小在不同的浏览器中会有所不同。
ocalStorage的优势是拓展了cookie的4K限制，localStorage会可以将第一次请求的数据直接存储到本地，这个相当于一个5M大小的针对于前端页面的数据库，相比于cookie可以节约带宽，但是局限性是只有在IE8以上的IE版本才支持localStorage这个属性。目前所有的浏览器中都会把localStorage的值类型限定为string类型，所以在使用时，需要把string类型转成我们常用的JSON数组对象类型。localStorage在浏览器的隐私模式下是不可读取的，localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡，所以需要控制存储的数据量，或者清除存储数据。localStorage不能被爬虫抓取到，从一定程度上保护了用户个人隐私。以下是使用展示因为我搜索框与展示搜索结果记录的页面是分开的，所以我这边是先把搜索值传递到后台，然后再传到前端。
然后就能得到以下的历史搜索记录列表
根据网站的需求，我这边还加上了删除单条历史搜索记录，清除所有历史搜索记录以及根据历史搜索记录再查询功能。
以下贴具体代码：
前端代码：
pclass=orderlist
ulid=keyname
/ul
pclass=btn
inputtype=buttonid=Clearonclick=DeletaAll()value=Clearclass=b1/
inputtype=buttonid=Trackonclick=Track()value=Trackclass=b2/
/
/
Javascript代码：
script
varsearchArr;
//定义一个search用来存储搜索记录的，判断浏览器有无数据存储（搜索历史）
if(localStorage.search){
//如果有，则把搜索记录转成数组的形式存放到searchArr的数组里（localStorage以字符串的形式存储，所以要把它转换成数组的形式）
searchArr=localStorage.search.split(，)
}else{
//如果没有，则定义searchArr为一个空的数组
searchArr=[];
}
//console.log(searchArr);
//把存储的数据显示出来作为搜索历史
MapSearchArr();
$(function(){
varval='{$trackNo}';//接收从后台传来的搜索值
if(val！=''){
//判断搜索值是否已重复，如果重复就去重
KillRepeat(val);
//去重后把数组存储到浏览器localStorage
ocalStorage.search=searchArr;//然后再把搜索内容显示出来
MapSearchArr();
}
});
functionMapSearchArr(){
vartmpHtml=;
for(vari=0;isearchArr.length;i++){
varn=i+1;
tmpHtml+=lionclick='Choose(this)'pclass='t1'+n+./ppclass='t2'+searchArr[i]+/ppclass='ic'onclick='Del(this)'/p/li
}
$(#keyname).html(tmpHtml);
}
//去重
functionKillRepeat(val){
varkill=0;
for(vari=0;isearchArr.length;i++){
if(val===searchArr[i]){
kill++;
}
}
if(kill1){
searchArr.push(val);
}
}
//删除搜索记录
functionDel(obj){
varn=$(obj).prev().text();
DeleteArr(n);
}
//删除
functionDeleteArr(val){
for(vari=0;isearchArr.length;i++){
if(val==searchArr[i]){
searchArr.splice(i，1);
}
}
if(searchArr.length==0){
DeletaAll();
}else{
ocalStorage.search=searchArr;window.location.reload();
}
}
//删除所有的搜索记录
functionDeletaAll(){
ocalStorage.clear();window.location.href={：urlrotue('Search/index2')};
}
functionChoose(obj){
$(obj).addClass('on').siblings().removeClass('on');
}
//点击搜索记录进行查询
functionTrack(){
vartrackno=$(.on).children('.t2').text();
window.location.href={：urlrotue('Search/index2')}？trackNo=+trackno;
}
/script
添加动力小姐姐微信
电话咨询
400-660-8066
