大家是否會遇到這些需求:

1. 如果有三個tab頁簽，從某個tab頁簽下跳出去打開新頁后，點擊瀏覽器后退鍵，能回到跳出去的相應tab頁簽下

2. 希望像原生app那樣在wap端的列表頁跳到詳情頁，點擊瀏覽器后退鍵，能回到跳出去的列表處

3. 如果有上拉加載更多，希望還是能回到相應頁碼處

4. 能多端同步閱讀進度么？高并發的短網址服務如何能保證性能？

下面我們就從易到難，一個一個的來解決上面的問題：

場景一

如果有三個tab頁簽，從某個tab頁簽下跳出去打開新頁后，點擊瀏覽器后退鍵，能回到跳出去的相應tab頁簽下

解決思路

1. 切換頁簽是記錄是哪個頁簽

$.each(me.$elements.$navBarItems, function(index, item) {     var navbaritemHM = me.createHammer(item);     navbaritemHM.on('tap', function (e) {         var tabtype = $(e.currentTarget).attr('data-tabtype');         // 頁簽切換打點         me.fire('tabChangeClick', {             id: me.options.entUuid,             tabtype: tabtype         });         me._pushHistoryState(tabtype);         me._hideLoadmoreBtnWrap();         me._handleNavbarClick(e, tabtype);     }); });

注意上面的me._pushHistoryState(tabtype)的方法；負責記錄tabtype? 那應該記錄在哪兒呢？

首先，我嘗試了

history.replaceState(null, '', newURL);

但是發現瀏覽器goback時，會不斷的pushstate，一直退出不去了，所以不能這么做

那就只能放到全局變量中了，在跳出時再replaceState(null, '', newURL);

_pushHistoryState: function (tabtype) {     var hash = location.hash;     var originURL = location.href;     if (hash) {         var hrefSplit = location.href.split('#')         originURL = hrefSplit[0];     }     var newURL= util.updateUrlQuery('type', tabtype, originURL);     if (hash) {         newURL += hash;     }     // 添加頁簽類型     // history.replaceState(null, '', newURL);     globalData.set({         lastURL: newURL     }); }

上面的代碼中globalData就是個全局變量

代碼如下：

var Gd = {     set: function () {         var args = arguments;         if (args.length === 1 && typeof args[0] === 'object') {             $.extend(this, args[0]);         }         else if (args.legnth === 2 &&  typeof args[0] === 'string') {             this[args[0]] = args[1];         }     } }; module.exports = Gd;

然后跳出去的時候history.replaceState

// 列表跳轉打點     me.on('jumpClick', function (opt) {     // 頁面跳轉前修改state     var lastURL = globalData.lastURL;     var hash = globalData.hash;     if (!lastURL) {         lastURL = location.href;     }     if (hash) {         var oHash = location.hash;         if (oHash) {             lastURL = lastURL.split('#')[0];         }         lastURL = lastURL + '#' + hash;     }     history.replaceState && history.replaceState(null, '', lastURL); });

等goback列表頁時，會從url上取tab類，如果有就覆蓋傳入的tabtype

var main = function (options) {     // 頁簽分類     var tabs = JSON.parse(options.tab) || [];     // url的query     var type = util.getQueryValue(location.href, 'type');     if (type) {         // 適配亂輸入type         type = ['word', 'txt', 'vision'].indexOf(type) === -1 ? null : type;     }     if (tabs.length > 0) {         if (!type) {// 第一個頁簽             type = tabs[0].icon;         }     }        // 主view     var view = new View({         el: options.el,         pageWrap: options.pageWrap,         Mediator: Mediator,         entUuid: options.entUuid,         tab: options.tab,         icon: type     });

需要注意的地方是,適配下用戶亂輸入query

 if (type) {         // 適配亂輸入type         type = ['word', 'txt', 'vision'].indexOf(type) === -1 ? null : type; }

場景二

希望像原生app那樣在wap端的列表頁跳到詳情頁，點擊瀏覽器后退鍵，能回到跳出去的列表處

解決思路

如果列表有分類，那很簡單可以套用上面的方案，頁面滾動時，記錄滾動到哪個分類下，存到globalData中，跳出去時history.replaceState

 // 頁面跳轉前修改state     var lastURL = globalData.lastURL;     var hash = globalData.hash;     if (!lastURL) {         lastURL = location.href;     }     if (hash) {         var oHash = location.hash;         if (oHash) {             lastURL = lastURL.split('#')[0];         }         lastURL = lastURL + '#' + hash;     }     history.replaceState && history.replaceState(null, '', lastURL);

思路就是頁簽類型用query記錄，位置用hash來記錄

頁面加載完就可以根據hash跳轉到相應的位置

// 根據錨點頁面滾動到相應的路徑分類下     _scrollToPath: function() {         var me = this;         var hash = location.hash;         if (hash) {             var anchor = hash.split('#')[1];             var pathWrap = me.$elements.$allPathWrap.filter(function(index) {                 if ($(this).attr('data-pathtype') === anchor) {                     return true;                 }             });             $(window).scrollTop(pathWrap.offset().top);         }     },

如果沒有分類，那就只能記錄頁面滾動距離，存到localstorage里面，后退回來，取出來距離跳轉相應位置

場景三

如果有上拉加載更多，希望還是能回到相應頁碼處

解決思路

如果頁面只顯示一頁，上拉加載更多，下拉刷新，這個問題也很好解決，存到localstorage里面，后退回來，重新加載數據

如果是上拉加載更多，一直累加dom，這個只能是緩存之前的數據到前端了，木有別的辦法了

場景四

能多端同步打開短網址，速度一致嗎？

這個問題只能是存庫了，頁面滾動時候，存到localstorage的同時，發后端請求記錄到數據庫了

總結

關于閱讀進度的記錄，除非就是

• 合理使用url query和hash記錄進度

• history.replaceState記錄跳出去的頁面url

• localstorage記錄頁碼，甚至是數據

• 頁面滾動時，實時記錄閱讀進度并存到短網址數據庫