ajax加载数据返回上一页丢失；h5本地存储localStorage

手机端因为用户体验问题，经常需要用到局部刷新，但是一般异步加载的内容在返回上一页的时候会出现数据丢失，又需要重新加载，这样就显得很不友好，而h5提供了一个localStorage 用法，能将异步加载的内容存储到本地，返回上一页的时候再读取出来显示到对应区域，有一个大神总结了两个用法，比较详细和全面，同时还做了兼容性分析，具体原理请移步：

https://blog.csdn.net/a727911438/article/details/54290931

最近接了一个手机端项目，刚好用到这个地方，结合tp5，做下笔记。

代码虽多，但是大部分都是项目内的东西，可以忽略不计，这里的点击跳转到文章详情并没有直接用a链接进行跳转，而是在跳转之前先做了一个本地存储，这样在返回的时候可以直接获取到存储的内容。

核心：弄懂下面几个用法基本上就可以了。

 A. localStorage.setItem      存储数据信息到本地

 B. localStorage.getItem      读取本地存储的信息

 C. localStorage.removeItem   删除本地存储的信息

 D. localStorage.clear        清空所以存储的信息

html代码：

{volist name="news_list" id="vo"}
    <div class="list">
        <a href="javascript:void(0)" onclick="go_to_detail(this,'{$vo.id}')">
            <div class="list-l pull-left">
                <div class="list-i">
                    {if condition="$vo.art_img != ''"}
                        <img src="/uploads/article/{$vo.art_img}" style="width: 100%">
                    {else /}
                        <img src="__HOMESTYLE__/images/noimg.jpg" alt="" style="width: 100%;height:100%">
                    {/if}
                </div>
            </div>
            <div class="list-r pull-right">
                <h5>{$vo.article_name}...</h5>
                <div class="ul-box">
                    <ul>
                        <li class="li1"><img src="__HOMESTYLE__/phone/images/icon18.png"> {$vo.create_time|date="Y-m-d",###}</li>
                        <li class="li2"><img src="__HOMESTYLE__/phone/images/icon19.png"> {$vo.read_num}</li>
                    </ul>
                </div>
            </div>
        </a>
    </div>
{/volist}
<div id="out_put_html">
    <!--用以装异步加载的容器-->
    <input type="hidden" id="more_div">
</div>

js:

<script>
    function go_to_detail(obj,id){
        var url = "{:url('home/mnews/news_show',['art_id'=>'idcode'])}";
        var tiaourl = url.replace('idcode',id);
        window.sessionStorage.setItem("out_put_html",$("#out_put_html").html());
        window.location.href = tiaourl;
        //跳转之前将局部页面保存到sessionStorage对象中。   
    }

    $(window).scroll(
        function() {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        if (scrollTop + windowHeight == scrollHeight) {
            $("#show_more").html('数据加载中');
            $offect = $("#offect").val();
            $.post('{:url("home/mnews/news")}',{offect:$offect}, function(data){
                if(data != -1){
                    var to_array = eval("("+data+")");
                    var str = "";
                    for(var p in to_array){
                        str += '<div class="list"><a href="javascript:;" onclick="go_to_detail(this,\''+to_array[p].id+'\')"><div class="list-l pull-left"><div class="list-i">';
                        if(to_array[p].art_img != ''){
                            str += '<img src="/uploads/article/'+to_array[p].art_img+'" style="width: 100%">'
                        }else{
                            str += '<img src="__HOMESTYLE__/images/noimg.jpg" alt="" style="width: 100%;height:100%">'
                        }
                        str += '</div></div><div class="list-r pull-right"><h5>'+to_array[p].article_name+'...</h5><div class="ul-box"><ul><li class="li1"><img src="__HOMESTYLE__/phone/images/icon18.png"> '+to_array[p].create_time+'</li><li class="li2"><img src="__HOMESTYLE__/phone/images/icon19.png"> '+to_array[p].read_num+'</li></ul></div></div></a></div>';
                    }
                    $("#offect").val($offect*1+6);
                    $("#more_div").before(str);
                }else{
                    $("#show_more").html('没有更多数据了');
                }
            }, 'json'); 
        }
    });
     
    //页面刷新
    window.onload=function(){
        //读取sessionStorage对象中的内容
        var myhtml= window.sessionStorage.getItem("out_put_html");
        //不为空表示是返回上一步进入该页面的。
        if(myhtml!=null){
            //将sessionStorage对象中保存的页面添加到页面中
            $("#out_put_html").html(myhtml);
            //清空sessionStorage对象的内容。
            window.sessionStorage.clear();
        }
    }
</script>