摘要:正在加載,請稍后滑動加載更多沒有更多內容了。。直接復制到本地便可測試,調試狀態為移動端效果更佳,如果路徑中含有則為測試數據,將后面的數據刪除即是搜索頁面。若有疑問或錯誤,請多多交流,謝謝
項目中localStorage實用
項目中h5本地存儲的一個小實用,本意使用cookie,但發現chrome調試被禁用,便用了localStorage.
此需求是一貼吧搜索頁,在新用戶第一次點擊搜索框時為搜索頁面,老用戶點擊搜索框時帶有搜索記錄,實現方法為在點擊搜索按鈕時便為用戶創建一個本地存儲localStorage user-data,判斷當頁面中含有user-data時便將搜索框的val追加進user-data中,以“|”隔開,若user-data不存在便創建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()); }
當頁面加載時若本地localStorage中含有user-data,則獲取此數據,返回為字符串,用split方法以“|”為判斷條件將此字符串切割為數組,并循環創建,導入頁面編輯器中,即:
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()方法為判斷路徑中是否含有搜索關鍵字keyWords,需求是當含有搜索關鍵字時顯示為搜索結果,無需關注。
function findKey(name){ var str=window.location.href; return str.indexOf(name)==-1?false:true; }
點擊清除搜索記錄時清除user-data,即:
localStorage.removeItem("user-data");
點擊搜索時將搜索框val拼入路徑,頁面刷新獲取后臺數據,減少ajax請求,search.html為相對路徑,即是當前文件名即可:
window.location.href="search.html?keyWords="+encodeURI($("#keyword").val());
實現此需求只需后端一個頁面即可(我們后端為asp.net),貼出完整測試代碼:
論壇搜索 搜索 清除搜索記錄
直接復制到本地便可測試,調試狀態為移動端效果更佳,如果路徑中含有keyWords則為測試數據,將.html后面的數據刪除即是搜索頁面。
若有疑問或錯誤,請多多交流,謝謝~~
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/50259.html
摘要:正在加載,請稍后滑動加載更多沒有更多內容了。。直接復制到本地便可測試,調試狀態為移動端效果更佳,如果路徑中含有則為測試數據,將后面的數據刪除即是搜索頁面。若有疑問或錯誤,請多多交流,謝謝 項目中localStorage實用 項目中h5本地存儲的一個小實用,本意使用cookie,但發現chrome調試被禁用,便用了localStorage. 此需求是一貼吧搜索頁,在新用戶第一次點擊搜索...
摘要:正在加載,請稍后滑動加載更多沒有更多內容了。。直接復制到本地便可測試,調試狀態為移動端效果更佳,如果路徑中含有則為測試數據,將后面的數據刪除即是搜索頁面。若有疑問或錯誤,請多多交流,謝謝 項目中localStorage實用 項目中h5本地存儲的一個小實用,本意使用cookie,但發現chrome調試被禁用,便用了localStorage. 此需求是一貼吧搜索頁,在新用戶第一次點擊搜索...
摘要:正在加載,請稍后滑動加載更多沒有更多內容了。。直接復制到本地便可測試,調試狀態為移動端效果更佳,如果路徑中含有則為測試數據,將后面的數據刪除即是搜索頁面。若有疑問或錯誤,請多多交流,謝謝 項目中localStorage實用 項目中h5本地存儲的一個小實用,本意使用cookie,但發現chrome調試被禁用,便用了localStorage. 此需求是一貼吧搜索頁,在新用戶第一次點擊搜索...
閱讀 2518·2021-09-24 10:29
閱讀 3799·2021-09-22 15:46
閱讀 2571·2021-09-04 16:41
閱讀 2977·2019-08-30 15:53
閱讀 1258·2019-08-30 14:24
閱讀 3052·2019-08-30 13:19
閱讀 2170·2019-08-29 14:17
閱讀 3520·2019-08-29 12:55