JavaScript_Html5_LocalStorage項目demo

来源:http://www.cnblogs.com/wmlucky/archive/2016/12/06/6139578.html
-Advertisement-
Play Games

項目中localStorage實用 項目中h5本地存儲的一個小實用，本意使用cookie，但發現chrome調試被禁用，便用了localStorage. 此需求是一貼吧搜索頁，在新用戶第一次點擊搜索框時為搜索頁面，老用戶點擊搜索框時帶有搜索記錄，實現方法為在點擊搜索按鈕時便為用戶創建一個本地存儲lo ...


項目中localStorage實用

項目中h5本地存儲的一個小實用，本意使用cookie，但發現chrome調試被禁用，便用了localStorage.

此需求是一貼吧搜索頁，在新用戶第一次點擊搜索框時為搜索頁面，老用戶點擊搜索框時帶有搜索記錄，實現方法為在點擊搜索按鈕時便為用戶創建一個本地存儲localStorage user-data,判斷當頁面中含有user-data時便將搜索框的val追加進user-data中，以“|”隔開，若user-data不存在便創建user-data。

1 var storage=window.localStorage;
2 if(storage.getItem("user-data")){
3     var str=storage.getItem("user-data");
4     storage.setItem("user-data",str+'|'+$('#keyword').val());
5 }else{
6     storage.setItem("user-data",$('#keyword').val());
7 }

當頁面載入時若本地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+="<div class='user-his'>"+data[i]+"</div>"
		}
		$('.user-clear').show();
	}else{
		html='<i class="iconfont icon-wenbensousuo"></i><br><span>未搜索任何信息</span>'
	}
	$('.search-con').html(html);
}

其中findKey()方法為判斷路徑中是否含有搜索關鍵字keyWords，需求是當含有搜索關鍵字時顯示為搜索結果，無需關註。

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

點擊清除搜索記錄時清除user-data,即：

1 localStorage.removeItem("user-data");

點擊搜索時將搜索框val拼入路徑，頁面刷新獲取後臺數據，減少ajax請求，search.html為相對路徑，即是當前文件名即可：

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

實現此需求只需後端一個頁面即可（我們後端為asp.net），貼出完整測試代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <link href="http://img.pccoo.cn/wap/webapp/font/iconfont.css" rel="stylesheet">
    <script type="text/javascript" src="http://img.pccoo.cn/wap/js2/jquery.js?v1.0"></script>
    <title>論壇搜索</title>
    <style>
        /*2016-12-1 wm*/
        *{padding:0;margin:0;}
        li{list-style: none}
        input{outline: none}
        .s-content{background:#fff;padding:10px;position:relative;height:30px;border-bottom:1px solid #e5e5e5;}
        .sear-wrap{display:-webkit-box;display:flex;width:80%;padding:5px; border-radius:20px;background:#f0f0f0;position:absolute;top:20%;left:10px;z-index:9;}
        .sear-wrap input[type=text] {  display:block;-webkit-box-flex:1;flex:1;height:24px;line-height:24px;color:#666;border:none;background:none;text-indent:10px;}
        .s-content .tishi{position:absolute;right:10px;top:16px;color:#09f;font-size: 14px}
        .search-con{width: 100%;background: #fff;text-align: center;}
        .search-con i{margin-top:100px;font-size: 80px;background: #f0f0f0;border-radius: 50%;width: 160px;height: 160px;display: inline-block;line-height: 160px;color:#ddd;}
        .search-con span{margin-top:10px;color:#ccc;display: inline-block;}
        .search-con .user-his{width: 100%;height: 40px;color:#333;line-height: 40px;text-align:left;padding-left:10px;font-size: 16px;border-bottom:1px solid #eee;}
        .user-clear{width: 90px;height: 30px;border-radius: 10px;font-size:14px;color:#09f;border:1px solid #09f;margin:20px auto;line-height: 30px;padding:0 10px;display: none}
        #span_search{width:30px;text-align: center;}
        #span_search i{color:#ccc;}
        #span_search i.icon-guanbi1{color:#ccc;}
        .srhword {position: absolute;top: 100px;border-radius: 0 0 3px 3px;width: 95%;z-index: 20;background: #fff;overflow-y: auto;_display: none;padding:10px 10px 40px;}
        .srhword li{padding:0px 0 10px;border-bottom:1px solid #eee;}
        .srhword .end-title{color:#999;margin:10px 0;font-size: 16px;border:none;}
        .srhword span{color:red;}
        .srhword .p1{color:#333;font-size: 16px;line-height: 26px;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;  }
        .srhword .p2{color:#ccc;font-size: 12px;margin-top:10px;position:relative;}
        .srhword .p2 i{font-size: 12px;margin-right:10px;}
        .srhword .p2 em{position:absolute;right:10px;}
        .load-more{position:absolute;bottom:0;left:0;line-height: 40px;text-align: center;width: 100%;background: #f0f0f0;}
        .load-more img{vertical-align: middle;}
        header dl dd.right-search{position:absolute;top:0;right:80px;}
        header dl dd.right-search i{font-size: 37px;color:#fff;}
    </style>

</head>
<body>
<section class="s-content">
    <form action="" method="get">
        <div class="sear-wrap">
            <input type="text" class="inp_srh" name="keyword" id="keyword" placeholder="請輸入帖子關鍵詞" maxlength="20">
            <span id="span_search"><i class="iconfont icon-search1"></i></span>
        </div>
        <span class="tishi">搜索</span>
    </form>
</section>
<section class="search-con">

    <!-- <i class="iconfont icon-search1"></i>
    <br>
    <span>未搜索任何信息</span> -->
    <!-- <div class="user-his">範冰冰</div> -->
</section>
<div class="user-clear">清除搜索記錄</div>
<!-- <div class="load-more">載入更多</div> -->
<script>
    //判斷頁面地址中是否含有key
    if(findKey("keyWords")){
        $(document).find('.search-con').attr('class','srhword').removeClass('search-con');
        var key=window.location.search;
        $('.srhword').html('<li class="end-title">關於<span> "汽車" </span>的搜索結果</li>\
            <!-- <li class="end-title">未找到關於<span> "汽車" </span>的相關信息</li> -->\
            <li>\
                <p class="p1">悄悄的進村，<span>汽車</span>悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村，</p>\
                <p class="p2"><i class="iconfont icon-touxiang"> 抹臉花看</i><i class="iconfont icon-xiaoxi2"> 23</i> 2分鐘前</p>\
            </li>\
            <li>\
                <p class="p1">悄悄的進村，<span>汽車</span>悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村，</p>\
                <p class="p2"><i class="iconfont icon-touxiang"> 抹臉花看</i><i class="iconfont icon-xiaoxi2"> 23</i> 2分鐘前</p>\
            </li>\
            <li>\
                <p class="p1">悄悄的進村，<span>汽車</span>悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村，</p>\
                <p class="p2"><i class="iconfont icon-touxiang"> 抹臉花看</i><i class="iconfont icon-xiaoxi2"> 23</i> 2分鐘前</p>\
            </li>\
            <li>\
                <p class="p1">悄悄的進村，<span>汽車</span>悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村，</p>\
                <p class="p2"><i class="iconfont icon-touxiang"> 抹臉花看</i><i class="iconfont icon-xiaoxi2"> 23</i> 2分鐘前</p>\
            </li>\
            <li>\
                <p class="p1">悄悄的進村，<span>汽車</span>悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村，</p>\
                <p class="p2"><i class="iconfont icon-touxiang"> 抹臉花看</i><i class="iconfont icon-xiaoxi2"> 23</i> 2分鐘前</p>\
            </li>\
            <li>\
                <p class="p1">悄悄的進村，<span>汽車</span>悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村悄悄的進村悄悄的進村悄悄的進村悄悄的進村，悄悄的進村，悄悄的進村，</p>\
                <p class="p2"><i class="iconfont icon-touxiang"> 抹臉花看</i><i class="iconfont icon-xiaoxi2"> 23</i> 2分鐘前</p>\
            </li>\
            <li>\
                <p class="p1">悄悄的進村，<span>汽車</span>悄悄的進村，悄悄的進村</p>\
                <p class="p2"><i class="iconfont icon-touxiang"> 抹臉花看</i><i class="iconfont icon-xiaoxi2"> 23</i> 2分鐘前</p>\
            </li>\
            ')
        $('.srhword').append('<div class="load-more">載入更多</div>');
        // match(/aaa(\S*)/)[1]
        key=key.match(/=(\S*)/)[1];
        $.ajax({
            url:'',
            type:'get',
            autoChange: true,
            data: { 'key': key},
            success:function(data){

            },
            error:function(){}
        })
    }
    //判斷網頁地址中是否包含key
    function findKey(name){
        var str=window.location.href;
        return str.indexOf(name)==-1?false:true;
    }
    //點擊清除清空輸入框內容
    $('#span_search').on('click',function(){
        if($('#span_search').find("i").hasClass("icon-guanbi1")){
            $("#keyword").val("");
            $('#span_search i').removeClass('icon-guanbi1').addClass('icon-search1');
        }
    })
    //輸入內容時顯示清除按鈕
    $('#keyword').keyup(function(){
        $('#span_search i').removeClass('icon-search1').addClass('icon-guanbi1');
    })
    //判斷如果有本地數據緩存生成列表
    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+="<div class='user-his'>"+data[i]+"</div>"
            }
            $('.user-clear').show();
        }else{
            html='<i class="iconfont icon-wenbensousuo"></i><br><span>未搜索任何信息</span>'
        }
        $('.search-con').html(html);
    }
    //點擊搜索記錄刷新頁面
    $('.search-con').find('div').on('click',function(){
        window.location.href='search.html?keyWords='+encodeURI($(this).text());
    })
    //點擊搜索按鈕將搜索內容存入本地
    $('.tishi').on('click',function(){
        if(window.localStorage && $('#keyword').val()!=""){
            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());
            }
        }
        // var reg=/\?(.*?)\=/g;
        // 將搜索內容傳入url刷新頁面
        if($('#keyword').val()!=""){
            window.location.href='search.html?keyWords='+encodeURI($('#keyword').val());
        }
    })
    //點擊清除本地存儲
    $('.user-clear').on('click',function(){
        localStorage.removeItem("user-data");
        $('.search-con').remove("div");
        $(this).hide();
        window.location.href=window.location.href;
    })
    //滑動載入下一頁
    if($('.load-more') && $('.load-more').offset().top<$(window).height()){
        $('.srhword').find('.load-more').html('沒有更多內容了。。')
    }
    $(window).scroll(function(){
        if($(document).scrollTop()+$(window).height()>=$('.load-more').offset().top){
            var flag=true,
            pageIndex=0;
            if(!flag)return;
            flag=!flag;
            pageIndex++;
            $('.srhword').find('.load-more').html("<img src='http://img.pccoo.cn/wap/images/load.gif' />正在載入，請稍後…")
            $.ajax({
                url:'',
                type:'get',
                autoChange: true,
                data: { 'key': key,'pageIndex':pageIndex},
                success:function(data){
                    if(data){
                        $('.srhword').find('.load-more').before(data);
                        $('.srhword').find('.load-more').html('滑動載入更多')
                    }else{
                        $('.srhword').find('.load-more').html('沒有更多內容了。。')
                    }
                    flag=!flag;
                },
                error:function(){}
            })
        }
    })

</script>
</body>
</html>

直接複製到本地便可測試，調試狀態為移動端效果更佳，如果路徑中含有keyWords則為測試數據，將.html後面的數據刪除即是搜索頁面。若有疑問或錯誤，請多多交流，謝謝~~


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 看圖理解JWT如何用於單點登錄
    單點登錄是我比較喜歡的一個技術解決方案，一方面他能夠提高產品使用的便利性，另一方面他分離了各個應用都需要的登錄服務，對性能以及工作量都有好處。自從上次研究過JWT如何應用於會話管理，加之以前的項目中也一直在使用CAS這個比較流行的單點登錄框架，所以就一直在琢磨如何能夠把JWT跟單點登錄結合起來一起使 ...
  • 設計模式 - 單例模式
    單例模式, 顧名思義, 就是共用同一個實體對象. 對於共用, 首先想到的就是static靜態變數, 那麼怎麼使用static去實現單例呢. 一、單線程單例模式 由於這個模式的實現還是比較簡單的, 所以直接上代碼.(不推薦使用此方式) 私有化構造函數之後, 外部就不能通過new A()的方式來實例化A ...
  • 設計模式之六大原則
    單一職責原則 單一職責原則（Single responsibility principle），就一個類而言，應該只有一個引起它變化的原因。 在實際編程中的體現，比如一個類只是某一個事物相關的集合，一個函數只做一件事情，不要在這個函數中編寫一些不想關的邏輯，這樣可以最大程度的提高程式的可維護性，可復用 ...
  • 【JavaScript】淺析javaScript和HTML與unicode字元集的關係
    javaScript和HTML支持的字元集 JavaScript是支持unicode的。 現代的瀏覽器在網頁中都支持ASCII字元集、ISO字元集、數學符號、希臘字母、其他符號。HTML5預設使用UTF-8。讀者可以點擊這兒查看ASCII、unicode和utf-8的關係。 javaScript和H ...
  • Pro HTML5 Programming(Second Edition)2.Canvas API（1）
    1.在使用HTML5的Canvas元素時，考慮到有些瀏覽器不支持canvas元素，或是不支持HTML5 Canvas API中的某些特性，開發人員最好提供一份替代代碼。 以下代碼展示如何在canvas中指定替代文本，當瀏覽器不支持canvas的時候會顯示這些替代內容： <canvas>Update ...
  • 深入理解js的prototype以及prototype的一些應用
    上一篇講了js的prototype概念，在這裡回顧一下prototype的定義： prototype是函數的一個屬性，並且是函數的原型對象。引用它的必然是函數，這個應該記住。 但是，很奇怪，各位看官，你有沒有看過類似下麵這樣引用prototype的js代碼： 咦？？？看著上面這行代碼，你是不是對pr ...
  • Html5 設置菱形鏈接菜單
    本例是採用html5+css3.0設置的菜單鏈接。其中主要用到了以下幾個方面： 1. CSS3.0中的2D變換，如：旋轉transform:rotate(45deg);移動，放大transform:rotate(-45deg) scale(1.2,1.2) translate(10px,0px);/ ...
  • Javascript外部對象
    Window 瀏覽器： - location：地址 - history：歷史 - Document：文檔 - screen：視窗 - navigator：幫助 > 1.外部對象就是瀏覽器提供的API -- **BOM** > 2.這些對象由w3c規定，由瀏覽器開發者設計並開發 > 3.這些對象分為2 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類