页面缓存
基本思路
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();
}