实现点击加载更多与sessionStorage定位

最新推荐文章于 2023-03-06 18:37:11 发布

Jacky-Summer

最新推荐文章于 2023-03-06 18:37:11 发布

阅读量501

点赞数

分类专栏： web前端文章标签： sessionStorage

本文链接：https://blog.csdn.net/lxjstudyIT/article/details/81003144

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

之前在做移动端项目的时候，有个功能，叫点击加载更多：即页面一堆信息，刚点开只显示一部分，拖到底部，有个点击加载的框，点击之后通过ajax请求去后台把剩余的数据继续加载出来；而且，比如滚动到底部，点击某个链接进去新的页面，然后按手机返回键，屏幕的滚动条又必须在原来的位置
在这里我们使用sessionStorage,HTML的web存储分为两种：

localStorage和 sessionStorage

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储（关闭窗口，存储的数据清空）

实现思路：

页面滚动，将滚动位置存到sessionStorage中
再次进到页面中，到sessionStorage中取出上次保存的浏览位置
- 滚动到对应位置

二话不说，上代码，首先是html页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="Keywords" content="首页" />
<title>首页</title>
<script type="text/javascript" src="jquery.1.9.1.min.js"></script>
<script src="1.js"></script>

<style>
    a{
        text-decoration: none;
        color: black;
    }
    .clickaction {
    background-color: #EFEFEF;
    color: #BBB;
    display: block;
    height: 34px;
    line-height: 34px;
    text-decoration: none;
    font-size: 12px;
    border-radius: 3px;
    text-align: center;
    clear: both;
    cursor:pointer;
}
</style>
</head>
<body>
    <ul id="cntnr0"></ul>   <!--把内容插入到这个ul里面-->
    <div id="loader0" class="clickaction"  onclick="getData()">点击加载更多</div>
</body>
</html>

js代码

$(document).ready(function() {

        var flag=sessionStorage['flag'];//定义标记，判断是否为第一次访问页面
        if(flag==undefined||flag==0){ //第一次访问页面
            getData();//获取数据
        }else{
            $('#cntnr0').html(sessionStorage['content']);
            sessionStorage['flag']=0;
            $(window).scroll(function(){
                if($(document).scrollTop()!=0){
                    $(window).offsetTop = sessionStorage['offsetTop'];
                }
            });
        }

    });
        function getData(){
            $.ajax({
                url: "demo.json",//json文件位置
                type: "GET",//请求方式为get
                dataType: "json", //返回数据格式为json
                success: function(data) {//请求成功完成后要执行的方法
                  $.each(data, function(i, item) {
                        var object=new Object();
                        object=data[i];
                        var html='<li><a href="content1.php?age='+object.age+'" class="test">名字：'+object.name+'</a></li>';
                        console.log(html);
                        $('#cntnr0').append(html);
                        sessionStorage['content']=$('#cntnr0').html();
                        sessionStorage['offsetTop']=$(window).scrollTop();
                   });
                }
            })
        }

demo.json

[
    {   "name":"胡小威0",
        "age":1,
        "male":true
    },
    {   "name":"胡小威1",
        "age":2,
        "male":false
    },
    {   "name":"胡小威2",
        "age":3,
        "male":true
    },
    {   "name":"胡小威3",
        "age":4,
        "male":true
    },
    {   "name":"胡小威4",
        "age":5,
        "male":true
    },
    {   "name":"胡小威5",
        "age":6,
        "male":true
    },
    {   "name":"胡小威6",
        "age":7,
        "male":true
    },
    {   "name":"胡小威7",
        "age":8,
        "male":true
    },
    {   "name":"胡小威8",
        "age":9,
        "male":true
    }

]

content1.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>详情</title>
</head>
<body>
    <p>这是详情内容</p>
    <?php echo $_GET['age'];?>
</body>
<script type="text/javascript" charset="utf-8">
    sessionStorage['flag']=1;  /*标记，表明不是第一次进入页面，之后再回到主页面即不会重新调用getData()方法，直接读取session的值*/
</script>
</html>

第一次打开页面.png

页面定义了一个变量flag，一开始sessionStorage[‘flag’]没有这个值，即undefined，故执行了getData()方法
getData()方法里面用了ajax请求，请求地址为demo.json，这个文件我写了9个数据（为了测试一下子加长页面数据用），通过$.each()方法读取出来，并存到sessionStorage里面，这里存了页面内容content和页面滚动高度offsetTop两个字段（字段名自定义）
这时点几次【点击加载更多】，会依次去ajax请求，又一次性增加9条数据，我点了几次，此时滚动条位置
这时sessionStorage[‘content’]已存进了现在这些内容，以Chrome浏览器为例，打开F12，进入Application

可看到内容和滚动高度都被记录到session里面了
这时随便点页面一个a标签，进入链接后的页面（session信息如下图），记录session中flag的为1，表示非第一次访问页面。

点击返回键，查看session的值

此时页面还是保持在滚动条原先的位置，点击加载实现。

Jacky-Summer

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
实现点击加载更多与sessionStorage定位

之前在做移动端项目的时候，有个功能，叫点击加载更多：即页面一堆信息，刚点开只显示一部分，拖到底部，有个点击加载的框，点击之后通过ajax请求去后台把剩余的数据继续加载出来；而且，比如滚动到底部，点击某个链接进去新的页面，然后按手机返回键，屏幕的滚动条又必须在原来的位置在这里我们使用sessionStorage,HTML的web存储分为两种：　localStorage和 sessionSt...
复制链接

扫一扫