页面缓存

页面缓存

基本思路

1、组装数据 缓存数据 返回上一个页面 取出数据 从新渲染 返回位置

    +   一种是记录位置，滚到记录的位置
    +   在开始,将返回的数据二次处理  每条数据加一个5位数的id;渲染并记录 储存 ;在返回的时候得到 构造锚点 click

2、缓存整个页面结构 返回上一页 取出 直接html(),重绑定事件

    //储存结构的话
    //发现只是拿出来渲染页面没发生变化;位置也会保存 

3、vue 里 keep-alive 组件

4、sui框架 路由系统里有缓存方法

5、mui也有,只是同一页面的tab切换,是一个内联的页面,

页面缓存，储存整个结构

封装 jquery 方法

    
        ;(function($){
            //一句话:jQuery.extend是对JQuery类的自定义扩展,jQuery.fn.extend是对JQuery对象的自定义扩展. 
            $.extend({
                /**
                * 获取url哈希值
                */
                glbHash:function (){
                        var hashArr = window.location.hash.split('#');
                        var obj={}
                        for(var i=1;i < hashArr.length;i++){
                            obj[hashArr[i].split('=')[0]] = hashArr[i].split('=')[1]
                        }
                        return obj;
                },
                changeUrl:function(scrollTop,pageIndex){
                    history.replaceState('',document.title,
                    location.href.replace(location.hash, "")+"#nowTop=" + 
                    scrollTop +"#oldPage=true"+"#currentPage="+pageIndex);
                }
            });
            var cacheConfig = {
                cacheDom : '#page'
            }
            var Util = {
                /**
                * 获取 url 的 fragment（即 hash 中去掉 # 的剩余部分）
                * @param {Object} url
                */
                getUrlFragment: function(url) {
                    var hashIndex = url.indexOf('#');
                    return hashIndex === -1 ? '' : url.slice(hashIndex + 1);
                },
                /**
                * 获取一个 url 的基本部分，即不包括 hash
                * @param {Object} url
                */
                getBaseUrl: function(url) {
                    var hashIndex = url.indexOf('#');
                    return hashIndex === -1 ? url.slice(0) : url.slice(0, hashIndex);
                },
                toUrlObject: function(url) {   
                    var baseUrl = this.getBaseUrl(url),
                        fragment = this.getUrlFragment(url);
                    return {
                        base: baseUrl,
                        original: url,
                        fragment: fragment
                    }
                }
            }
            $.prototype._saveDocumentIntoCache = function(doc, url) {
                var urlAsKey = Util.toUrlObject(url).base;
                var $content= doc.find(cacheConfig.cacheDom).html();
                sessionStorage.setItem(urlAsKey,JSON.stringify($content));
            };
            $.prototype._doSwitchDocument = function(urlAsKey) {
                var Dom = JSON.parse(sessionStorage.getItem(urlAsKey));
                $(cacheConfig.cacheDom).html(Dom);
            }
            //使用JQuery.fn对象创建JQuery对象方法 
            //实际上jQuery.fn对象就是挂接在jQuery.prototype上的
            $.fn.extend({
                /**
                * 初始化
                * - 把当前文档内容缓存起来
                * @private
                */
                _saveCache:function(obj){
                    var currentUrl = location.href;
                    var currentUrlObj = Util.toUrlObject(currentUrl);
                    // 用来保存 document
                    var $doc = $(document);
                    this._saveDocumentIntoCache($doc, currentUrl);
                },
                _getDocument:function(){
                    var currentUrl = location.href;
                    var urlAsKey = Util.toUrlObject(currentUrl).base;
                    this._doSwitchDocument(urlAsKey);
                }
            })
        })(jQuery);
    

< 使用方法

1、 跳转前储存

    
        $('#test')._saveCache();
    

2、 储存后改变url

    
        $.changeUrl(scrollTop,pageIndex);
    

3、跳转

    
        window.location.href
    

4、back 回 上一个页面 取数据 渲染

        if($.glbHash().oldPage == 'true'){
            $('#test')._getDocument();
        }