localStorag是在HTML5中,新加入的一個(gè)特性,localStorage主要是用來(lái)作為本地存儲(chǔ)來(lái)使用的,用來(lái)解決cookie存儲(chǔ)空間不足的問(wèn)題,因?yàn)閏ookie中每條cookie的存儲(chǔ)空間為4k,但是localStorage在一般瀏覽器中支持的是5M大小,這個(gè)大小在不同的瀏覽器中會(huì)有所不同。
localStorage的優(yōu)勢(shì)是拓展了cookie的4K限制,localStorage會(huì)可以將第一次請(qǐng)求的數(shù)據(jù)直接存儲(chǔ)到本地,這個(gè)相當(dāng)于一個(gè)5M大小的針對(duì)于前端頁(yè)面的數(shù)據(jù)庫(kù),相比于cookie可以節(jié)約帶寬,但是局限性是只有在IE8以上的IE版本才支持localStorage這個(gè)屬性。目前所有的瀏覽器中都會(huì)把localStorage的值類(lèi)型限定為string類(lèi)型,所以在使用時(shí),需要把string類(lèi)型轉(zhuǎn)成我們常用的JSON數(shù)組對(duì)象類(lèi)型。localStorage在瀏覽器的隱私模式下是不可讀取的,localStorage本質(zhì)上是對(duì)字符串的讀取,如果存儲(chǔ)內(nèi)容多的話(huà)會(huì)消耗內(nèi)存空間,會(huì)導(dǎo)致頁(yè)面變卡,所以需要控制存儲(chǔ)的數(shù)據(jù)量,或者清除存儲(chǔ)數(shù)據(jù)。localStorage不能被爬蟲(chóng)抓取到,從一定程度上保護(hù)了用戶(hù)個(gè)人隱私。
以下是使用展示
因?yàn)槲宜阉骺蚺c展示搜索結(jié)果記錄的頁(yè)面是分開(kāi)的,所以我這邊是先把搜索值傳遞到后臺(tái),然后再傳到前端。
然后就能得到以下的歷史搜索記錄列表
根據(jù)網(wǎng)站的需求,我這邊還加上了刪除單條歷史搜索記錄,清除所有歷史搜索記錄以及根據(jù)歷史搜索記錄再查詢(xún)功能。
以下貼具體代碼:
前端代碼:
<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代碼:
<script>
var searchArr;
//定義一個(gè)search用來(lái)存儲(chǔ)搜索記錄的,判斷瀏覽器有無(wú)數(shù)據(jù)存儲(chǔ)(搜索歷史)
if(localStorage.search){
//如果有,則把搜索記錄轉(zhuǎn)成數(shù)組的形式存放到searchArr的數(shù)組里(localStorage以字符串的形式存儲(chǔ),所以要把它轉(zhuǎn)換成數(shù)組的形式)
searchArr= localStorage.search.split(",")
}else{
//如果沒(méi)有,則定義searchArr為一個(gè)空的數(shù)組
searchArr = [];
}
// console.log(searchArr);
//把存儲(chǔ)的數(shù)據(jù)顯示出來(lái)作為搜索歷史
MapSearchArr();
$(function(){
var val = '{$trackNo}';//接收從后臺(tái)傳來(lái)的搜索值
if(val!=''){
//判斷搜索值是否已重復(fù),如果重復(fù)就去重
KillRepeat(val);
//去重后把數(shù)組存儲(chǔ)到瀏覽器localStorage
localStorage.search = searchArr;
//然后再把搜索內(nèi)容顯示出來(lái)
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');
}
//點(diǎn)擊搜索記錄進(jìn)行查詢(xún)
function Track(){
var trackno = $(".on").children('.t2').text();
window.location.href = "{:urlrotue('Search/index2')}?trackNo="+ trackno;
}
</script>
新聞標(biāo)題:使用localStorage制作歷史搜索記錄
鏈接地址:http://m.rwnh.cn/news2/238952.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導(dǎo)航、網(wǎng)站排名、網(wǎng)站內(nèi)鏈、網(wǎng)站營(yíng)銷(xiāo)、搜索引擎優(yōu)化、ChatGPT
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話(huà):028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源:
創(chuàng)新互聯(lián)