資訊專欄INFORMATION COLUMN
摘要：正在加載，請稍后滑動加載更多沒有更多內(nèi)容了。。直接復(fù)制到本地便可測試，調(diào)試狀態(tài)為移動端效果更佳，如果路徑中含有則為測試數(shù)據(jù)，將后面的數(shù)據(jù)刪除即是搜索頁面。若有疑問或錯誤，請多多交流，謝謝
項目中l(wèi)ocalStorage實用
項目中h5本地存儲的一個小實用，本意使用cookie，但發(fā)現(xiàn)chrome調(diào)試被禁用，便用了localStorage.
此需求是一貼吧搜索頁，在新用戶第一次點擊搜索框時為搜索頁面，老用戶點擊搜索框時帶有搜索記錄，實現(xiàn)方法為在點擊搜索按鈕時便為用戶創(chuàng)建一個本地存儲localStorage user-data,判斷當(dāng)頁面中含有user-data時便將搜索框的val追加進(jìn)user-data中，以“|”隔開，若user-data不存在便創(chuàng)建user-data。
var storage=window.localStorage;
if(storage.getItem("user-data")){
var str=storage.getItem("user-data");
storage.setItem("user-data",str+"|"+$("#keyword").val());
}else{
storage.setItem("user-data",$("#keyword").val());
}
當(dāng)頁面加載時若本地localStorage中含有user-data,則獲取此數(shù)據(jù)，返回為字符串，用split方法以“|”為判斷條件將此字符串切割為數(shù)組，并循環(huán)創(chuàng)建，導(dǎo)入頁面編輯器中，即：
if($(".search-con") && !findKey("keyWords")){
var html="";
if(window.localStorage && localStorage.getItem("user-data")){
var data=localStorage.getItem("user-data").split("|");
for(var i=data.length-1;i>=0;i--){
html+=""+data[i]+""
}
$(".user-clear").show();
}else{
html="
未搜索任何信息"
}
$(".search-con").html(html);
}
其中findKey()方法為判斷路徑中是否含有搜索關(guān)鍵字keyWords，需求是當(dāng)含有搜索關(guān)鍵字時顯示為搜索結(jié)果，無需關(guān)注。
function findKey(name){
var str=window.location.href;
return str.indexOf(name)==-1?false:true;
}
點擊清除搜索記錄時清除user-data,即：
localStorage.removeItem("user-data");
點擊搜索時將搜索框val拼入路徑，頁面刷新獲取后臺數(shù)據(jù)，減少ajax請求，search.html為相對路徑，即是當(dāng)前文件名即可：
window.location.href="search.html?keyWords="+encodeURI($("#keyword").val());
實現(xiàn)此需求只需后端一個頁面即可（我們后端為asp.net），貼出完整測試代碼：
論壇搜索
清除搜索記錄
直接復(fù)制到本地便可測試，調(diào)試狀態(tài)為移動端效果更佳，如果路徑中含有keyWords則為測試數(shù)據(jù)，將.html后面的數(shù)據(jù)刪除即是搜索頁面。
若有疑問或錯誤，請多多交流，謝謝~~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/88047.html
摘要：正在加載，請稍后滑動加載更多沒有更多內(nèi)容了。。直接復(fù)制到本地便可測試，調(diào)試狀態(tài)為移動端效果更佳，如果路徑中含有則為測試數(shù)據(jù)，將后面的數(shù)據(jù)刪除即是搜索頁面。若有疑問或錯誤，請多多交流，謝謝 項目中l(wèi)ocalStorage實用 項目中h5本地存儲的一個小實用，本意使用cookie，但發(fā)現(xiàn)chrome調(diào)試被禁用，便用了localStorage. 此需求是一貼吧搜索頁，在新用戶第一次點擊搜索...
摘要：正在加載，請稍后滑動加載更多沒有更多內(nèi)容了。。直接復(fù)制到本地便可測試，調(diào)試狀態(tài)為移動端效果更佳，如果路徑中含有則為測試數(shù)據(jù)，將后面的數(shù)據(jù)刪除即是搜索頁面。若有疑問或錯誤，請多多交流，謝謝 項目中l(wèi)ocalStorage實用 項目中h5本地存儲的一個小實用，本意使用cookie，但發(fā)現(xiàn)chrome調(diào)試被禁用，便用了localStorage. 此需求是一貼吧搜索頁，在新用戶第一次點擊搜索...
摘要：正在加載，請稍后滑動加載更多沒有更多內(nèi)容了。。直接復(fù)制到本地便可測試，調(diào)試狀態(tài)為移動端效果更佳，如果路徑中含有則為測試數(shù)據(jù)，將后面的數(shù)據(jù)刪除即是搜索頁面。若有疑問或錯誤，請多多交流，謝謝 項目中l(wèi)ocalStorage實用 項目中h5本地存儲的一個小實用，本意使用cookie，但發(fā)現(xiàn)chrome調(diào)試被禁用，便用了localStorage. 此需求是一貼吧搜索頁，在新用戶第一次點擊搜索...
閱讀 2578·2021-11-24 09:38
閱讀 2606·2019-08-30 15:54
閱讀 924·2019-08-30 15:52
閱讀 1913·2019-08-30 15:44
閱讀 2718·2019-08-30 13:48
閱讀 774·2019-08-29 16:21
閱讀 1003·2019-08-29 14:03
閱讀 2216·2019-08-28 18:15
