码迷，mamicode.com
首页 > 编程语言 > 详细

JavaScript_Html5_LocalStorage项目demo

时间：2020-03-26 19:25:10      阅读：81      评论：0      收藏：0      [点我收藏+]

标签：har   ott   scrolltop   type   border   asp   match   width   fse   

项目中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+="<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，需求是当含有搜索关键字时显示为搜索结果，无需关注。

    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），贴出完整测试代码：

<!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后面的数据删除即是搜索页面。
若有疑问或错误，请多多交流，谢谢~~

JavaScript_Html5_LocalStorage项目demo

标签：har   ott   scrolltop   type   border   asp   match   width   fse   

原文地址：https://www.cnblogs.com/jlfw/p/12576415.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！