JavaScript_Html5_LocalStorage項目demo

Pink 發布于2019-08-22 11:02 / 2711人閱讀

摘要：正在加載，請稍后滑動加載更多沒有更多內容了。。直接復制到本地便可測試，調試狀態為移動端效果更佳，如果路徑中含有則為測試數據，將后面的數據刪除即是搜索頁面。若有疑問或錯誤，請多多交流，謝謝

項目中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/91653.html

JavaScript_Html5_LocalStorage項目demo

摘要：正在加載，請稍后滑動加載更多沒有更多內容了。。直接復制到本地便可測試，調試狀態為移動端效果更佳，如果路徑中含有則為測試數據，將后面的數據刪除即是搜索頁面。若有疑問或錯誤，請多多交流，謝謝項目中localStorage實用項目中h5本地存儲的一個小實用，本意使用cookie，但發現chrome調試被禁用，便用了localStorage. 此需求是一貼吧搜索頁，在新用戶第一次點擊搜索...

Magicer 2019-08-21 14:52 評論0 收藏0
JavaScript_Html5_LocalStorage項目demo

摘要：正在加載，請稍后滑動加載更多沒有更多內容了。。直接復制到本地便可測試，調試狀態為移動端效果更佳，如果路徑中含有則為測試數據，將后面的數據刪除即是搜索頁面。若有疑問或錯誤，請多多交流，謝謝項目中localStorage實用項目中h5本地存儲的一個小實用，本意使用cookie，但發現chrome調試被禁用，便用了localStorage. 此需求是一貼吧搜索頁，在新用戶第一次點擊搜索...

Loong_T 2019-08-26 11:27 評論0 收藏0
JavaScript_Html5_LocalStorage項目demo

摘要：正在加載，請稍后滑動加載更多沒有更多內容了。。直接復制到本地便可測試，調試狀態為移動端效果更佳，如果路徑中含有則為測試數據，將后面的數據刪除即是搜索頁面。若有疑問或錯誤，請多多交流，謝謝項目中localStorage實用項目中h5本地存儲的一個小實用，本意使用cookie，但發現chrome調試被禁用，便用了localStorage. 此需求是一貼吧搜索頁，在新用戶第一次點擊搜索...

BlackHole1 2019-08-01 16:03 評論0 收藏0