沐鸣登录网站_使用localStorage制作历史搜索记录

www.pptschool.com 沐鸣平台注册 2022-05-27 762 次浏览 没有评论

localStorag是在HTML5中,新加入的一个特性,localStorage主要是用来作为本地存储来使用的,用来解决cookie存储空间不足的问题,因为cookie中每条cookie的存储空间为4k,但是localStorage在一般浏览器中支持的是5M大小,这个大小在不同的浏览器中会有所不同。

localStorage的优势是拓展了cookie的4K限制,localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数据库,相比于cookie可以节约带宽,但是局限性是只有在IE8以上的IE版本才支持localStorage这个属性。目前所有的浏览器中都会把localStorage的值类型限定为string类型,所以在使用时,需要把string类型转成我们常用的JSON数组对象类型。localStorage在浏览器的隐私模式下是不可读取的,localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡,所以需要控制存储的数据量,或者清除存储数据。localStorage不能被爬虫抓取到,从一定程度上保护了用户个人隐私。

以下是使用展示

input

 

因为我搜索框与展示搜索结果记录的页面是分开的,所以我这边是先把搜索值传递到后台,然后再传到前端。

然后就能得到以下的历史搜索记录列表

根据网站的需求,我这边还加上了删除单条历史搜索记录,清除所有历史搜索记录以及根据历史搜索记录再查询功能。

 

以下贴具体代码:

前端代码:

html

<div class=”orderlist”>

<ul id=”keyname”>

</ul>

<div class=”btn”>

<input type=”button” id=”Clear” onclick=”DeletaAll()” value=”Clear” class=”b1″ />

<input type=”button” id=”Track” onclick=”Track()” value=”Track” class=”b2″/>

</div>

</div>

Javascript代码:


JS代码

<script>

var searchArr;

//定义一个search用来存储搜索记录的,判断浏览器有无数据存储(搜索历史)

if(localStorage.search){

//如果有,则把搜索记录转成数组的形式存放到searchArr的数组里(localStorage以字符串的形式存储,所以要把它转换成数组的形式)

searchArr= localStorage.search.split(“,”)

}else{

//如果没有,则定义searchArr为一个空的数组

searchArr = [];

}

// console.log(searchArr);

//把存储的数据显示出来作为搜索历史

MapSearchArr();

$(function(){

var val = ‘{$trackNo}’;//接收从后台传来的搜索值

if(val!=”){

//判断搜索值是否已重复,如果重复就去重

KillRepeat(val);

//去重后把数组存储到浏览器localStorage

localStorage.search = searchArr;

//然后再把搜索内容显示出来

MapSearchArr();

}

});

function MapSearchArr(){

var tmpHtml = “”;

for (var i=0;i<searchArr.length;i++){

var n = i+1;

tmpHtml += “<li onclick=’Choose(this)’><div class=’t1′>”+n+”.</div><div class=’t2′>”+searchArr[i]+”</div><div class=’ic’ onclick=’Del(this)’></div></li>”

}

$(“#keyname”).html(tmpHtml);

}

//去重

function KillRepeat(val){

var kill = 0;

for (var i=0;i<searchArr.length;i++){

if(val===searchArr[i]){

kill ++;

}

}

if(kill<1){

searchArr.push(val);

}

}

//删除搜索记录

function Del(obj){

var n = $(obj).prev().text();

DeleteArr(n);

}

//删除

function DeleteArr(val){

for (var i=0;i<searchArr.length;i++){

if(val==searchArr[i]){

searchArr.splice(i,1);

}

}

if(searchArr.length==0){

DeletaAll();

}else{

localStorage.search = searchArr;

window.location.reload();

}

}

//删除所有的搜索记录

function DeletaAll(){

localStorage.clear();

window.location.href=”{:urlrotue(‘Search/index2’)}”;

}

function Choose(obj){

$(obj).addClass(‘on’).siblings().removeClass(‘on’);

}

//点击搜索记录进行查询

function Track(){

var trackno = $(“.on”).children(‘.t2’).text();

window.location.href = “{:urlrotue(‘Search/index2’)}?trackNo=”+ trackno;

}

</script>

 

 

 

回顶部
51La