成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript_Html5_LocalStorage項(xiàng)目demo

Loong_T / 398人閱讀

摘要：正在加載，請(qǐng)稍后滑動(dòng)加載更多沒(méi)有更多內(nèi)容了。。直接復(fù)制到本地便可測(cè)試，調(diào)試狀態(tài)為移動(dòng)端效果更佳，如果路徑中含有則為測(cè)試數(shù)據(jù)，將后面的數(shù)據(jù)刪除即是搜索頁(yè)面。若有疑問(wèn)或錯(cuò)誤，請(qǐng)多多交流，謝謝

項(xiàng)目中l(wèi)ocalStorage實(shí)用

項(xiàng)目中h5本地存儲(chǔ)的一個(gè)小實(shí)用，本意使用cookie，但發(fā)現(xiàn)chrome調(diào)試被禁用，便用了localStorage.

此需求是一貼吧搜索頁(yè)，在新用戶第一次點(diǎn)擊搜索框時(shí)為搜索頁(yè)面，老用戶點(diǎn)擊搜索框時(shí)帶有搜索記錄，實(shí)現(xiàn)方法為在點(diǎn)擊搜索按鈕時(shí)便為用戶創(chuàng)建一個(gè)本地存儲(chǔ)localStorage user-data,判斷當(dāng)頁(yè)面中含有user-data時(shí)便將搜索框的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)頁(yè)面加載時(shí)若本地localStorage中含有user-data,則獲取此數(shù)據(jù)，返回為字符串，用split方法以“|”為判斷條件將此字符串切割為數(shù)組，并循環(huán)創(chuàng)建，導(dǎo)入頁(yè)面編輯器中，即：

    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)鍵字時(shí)顯示為搜索結(jié)果，無(wú)需關(guān)注。

    function findKey(name){
        var str=window.location.href;
        return str.indexOf(name)==-1?false:true;
    }

點(diǎn)擊清除搜索記錄時(shí)清除user-data,即：

localStorage.removeItem("user-data");

點(diǎn)擊搜索時(shí)將搜索框val拼入路徑，頁(yè)面刷新獲取后臺(tái)數(shù)據(jù)，減少ajax請(qǐng)求，search.html為相對(duì)路徑，即是當(dāng)前文件名即可：

window.location.href="search.html?keyWords="+encodeURI($("#keyword").val());

實(shí)現(xiàn)此需求只需后端一個(gè)頁(yè)面即可（我們后端為asp.net），貼出完整測(cè)試代碼：




    
    
    
    
    
    
    
    論壇搜索
    





    

        

            
            
        

        搜索
    






    
    



清除搜索記錄

直接復(fù)制到本地便可測(cè)試，調(diào)試狀態(tài)為移動(dòng)端效果更佳，如果路徑中含有keyWords則為測(cè)試數(shù)據(jù)，將.html后面的數(shù)據(jù)刪除即是搜索頁(yè)面。
若有疑問(wèn)或錯(cuò)誤，請(qǐng)多多交流，謝謝~~

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/107001.html

相關(guān)文章

  • JavaScript_Html5_LocalStorage項(xiàng)目demo

    摘要：正在加載，請(qǐng)稍后滑動(dòng)加載更多沒(méi)有更多內(nèi)容了。。直接復(fù)制到本地便可測(cè)試，調(diào)試狀態(tài)為移動(dòng)端效果更佳，如果路徑中含有則為測(cè)試數(shù)據(jù)，將后面的數(shù)據(jù)刪除即是搜索頁(yè)面。若有疑問(wèn)或錯(cuò)誤，請(qǐng)多多交流，謝謝 項(xiàng)目中l(wèi)ocalStorage實(shí)用 項(xiàng)目中h5本地存儲(chǔ)的一個(gè)小實(shí)用，本意使用cookie，但發(fā)現(xiàn)chrome調(diào)試被禁用，便用了localStorage. 此需求是一貼吧搜索頁(yè)，在新用戶第一次點(diǎn)擊搜索...

    Pink 評(píng)論0 收藏0

  • JavaScript_Html5_LocalStorage項(xiàng)目demo

    摘要：正在加載，請(qǐng)稍后滑動(dòng)加載更多沒(méi)有更多內(nèi)容了。。直接復(fù)制到本地便可測(cè)試，調(diào)試狀態(tài)為移動(dòng)端效果更佳，如果路徑中含有則為測(cè)試數(shù)據(jù)，將后面的數(shù)據(jù)刪除即是搜索頁(yè)面。若有疑問(wèn)或錯(cuò)誤，請(qǐng)多多交流，謝謝 項(xiàng)目中l(wèi)ocalStorage實(shí)用 項(xiàng)目中h5本地存儲(chǔ)的一個(gè)小實(shí)用，本意使用cookie，但發(fā)現(xiàn)chrome調(diào)試被禁用，便用了localStorage. 此需求是一貼吧搜索頁(yè)，在新用戶第一次點(diǎn)擊搜索...

    Magicer 評(píng)論0 收藏0

  • JavaScript_Html5_LocalStorage項(xiàng)目demo

    摘要：正在加載，請(qǐng)稍后滑動(dòng)加載更多沒(méi)有更多內(nèi)容了。。直接復(fù)制到本地便可測(cè)試，調(diào)試狀態(tài)為移動(dòng)端效果更佳，如果路徑中含有則為測(cè)試數(shù)據(jù)，將后面的數(shù)據(jù)刪除即是搜索頁(yè)面。若有疑問(wèn)或錯(cuò)誤，請(qǐng)多多交流，謝謝 項(xiàng)目中l(wèi)ocalStorage實(shí)用 項(xiàng)目中h5本地存儲(chǔ)的一個(gè)小實(shí)用，本意使用cookie，但發(fā)現(xiàn)chrome調(diào)試被禁用，便用了localStorage. 此需求是一貼吧搜索頁(yè)，在新用戶第一次點(diǎn)擊搜索...

    BlackHole1 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<