使用localStorage制作歷史搜索記錄

localStorag是在HTML5中，新加入的一個特性，localStorage主要是用來作為本地存儲來使用的，用來解決cookie存儲空間不足的問題，因為cookie中每條cookie的存儲空間為4k，但是localStorage在一般瀏覽器中支持的是5M大小，這個大小在不同的瀏覽器中會有所不同。
localStorage的優(yōu)勢是拓展了cookie的4K限制，localStorage會可以將第一次請求的數(shù)據(jù)直接存儲到本地，這個相當于一個5M大小的針對于前端頁面的數(shù)據(jù)庫，相比于cookie可以節(jié)約帶寬，但是局限性是只有在IE8以上的IE版本才支持localStorage這個屬性。目前所有的瀏覽器中都會把localStorage的值類型限定為string類型，所以在使用時，需要把string類型轉(zhuǎn)成我們常用的JSON數(shù)組對象類型。localStorage在瀏覽器的隱私模式下是不可讀取的，localStorage本質(zhì)上是對字符串的讀取，如果存儲內(nèi)容多的話會消耗內(nèi)存空間，會導(dǎo)致頁面變卡，所以需要控制存儲的數(shù)據(jù)量，或者清除存儲數(shù)據(jù)。localStorage不能被爬蟲抓取到，從一定程度上保護了用戶個人隱私。

以下是使用展示

因為我搜索框與展示搜索結(jié)果記錄的頁面是分開的，所以我這邊是先把搜索值傳遞到后臺，然后再傳到前端。

然后就能得到以下的歷史搜索記錄列表

根據(jù)網(wǎng)站的需求，我這邊還加上了刪除單條歷史搜索記錄，清除所有歷史搜索記錄以及根據(jù)歷史搜索記錄再查詢功能。
以下貼具體代碼：

前端代碼：
<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;
//定義一個search用來存儲搜索記錄的，判斷瀏覽器有無數(shù)據(jù)存儲（搜索歷史）
if(localStorage.search){
//如果有，則把搜索記錄轉(zhuǎn)成數(shù)組的形式存放到searchArr的數(shù)組里（localStorage以字符串的形式存儲，所以要把它轉(zhuǎn)換成數(shù)組的形式）
searchArr= localStorage.search.split(",")
}else{
//如果沒有，則定義searchArr為一個空的數(shù)組
searchArr = [];
}
// console.log(searchArr);
//把存儲的數(shù)據(jù)顯示出來作為搜索歷史
MapSearchArr();
$(function(){
var val = '{$trackNo}';//接收從后臺傳來的搜索值
if(val!=''){
//判斷搜索值是否已重復(fù)，如果重復(fù)就去重
KillRepeat(val);
//去重后把數(shù)組存儲到瀏覽器localStorage
localStorage.search = searchArr;
//然后再把搜索內(nè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');
}
//點擊搜索記錄進行查詢
function Track(){
var trackno = $(".on").children('.t2').text();
window.location.href = "{:urlrotue('Search/index2')}?trackNo="+ trackno;
}
</script>

新聞標題：使用localStorage制作歷史搜索記錄
鏈接地址：http://www.jbt999.com/news2/238952.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、網(wǎng)站排名、網(wǎng)站內(nèi)鏈、網(wǎng)站營銷、搜索引擎優(yōu)化、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：[email protected]。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)