[[434828]]

由于公司最近有個需求是想讓我們的get請求的參數(shù)都直接顯示在瀏覽器url上，這樣我們就可以直接通過復(fù)制url來顯示對應(yīng)的界面數(shù)據(jù)了。

背景介紹

由于我們常用的http請求一般是基于XHR對象的實(shí)現(xiàn)或者fetch實(shí)現(xiàn)，這種請求操作并不會觸發(fā)瀏覽器url的變化，這樣雖然也能正常請求數(shù)據(jù)并渲染到頁面，但是如果用戶在當(dāng)前頁面操作了某個get請求并得到了某條數(shù)據(jù)，想通過鏈接將當(dāng)前看到的界面分享給其他人時，那么此時瀏覽器url并不會變化，通過鏈接只能訪問到初始化的數(shù)據(jù)界面，此時并不能達(dá)到理想的效果。如下圖所示：

(單純使用ajax或者fetch實(shí)現(xiàn)get請求時)

當(dāng)我們在該頁面將列表切換到第二頁時，瀏覽器url并沒有變化，所以將鏈接復(fù)制給其他人打開并不會將列表結(jié)果切換到第二頁，而是重新初始化。

實(shí)現(xiàn)過程

通過以上的背景和問題，我們可以想想可以怎么實(shí)現(xiàn)呢?我的第一個反應(yīng)就是使用location API來實(shí)現(xiàn)，我們可以使用location.search來讀寫瀏覽器query參數(shù)：

location.search = '?page=2'; 

這段代碼雖然可以改變?yōu)g覽器url，如下圖所示：

但會出現(xiàn)一個性能問題，就是當(dāng)我們執(zhí)行了以上代碼后，整個瀏覽器都會刷新，導(dǎo)致我們不想刷新的部分也刷新了，那我們有辦法可以讓它局部刷新嗎?答案是必須有。

這里就要引出我們本文的重點(diǎn)：history API。

history API

Window.history是一個只讀屬性，用來獲取History 對象的引用，History 對象提供了操作瀏覽器會話歷史(瀏覽器地址欄中訪問的頁面，以及當(dāng)前頁面中通過框架加載的頁面)的接口。HTML5引入了 history.pushState() 和 history.replaceState() 方法，它們分別可以添加和修改歷史記錄條目。

使用 history.pushState() 可以改變referrer，它在用戶發(fā)送 XMLHttpRequest 請求時在HTTP頭部使用，改變state后創(chuàng)建的 XMLHttpRequest 對象的referrer都會被改變。因?yàn)閞eferrer是標(biāo)識創(chuàng)建 XMLHttpRequest 對象時 this 所代表的window對象中document的URL。

那么我們就可以使用pushState來實(shí)現(xiàn)我們的更新瀏覽器url功能了。

pushState() 方法

pushState() 需要三個參數(shù): 一個狀態(tài)對象, 一個標(biāo)題 (目前已忽略), 和 (可選的) 一個URL：

• 狀態(tài)對象 — 狀態(tài)對象state是一個JavaScript對象，通過pushState () 創(chuàng)建新的歷史記錄條目。無論什么時候用戶導(dǎo)航到新的狀態(tài)，popstate事件就會被觸發(fā)，且該事件的state屬性包含該歷史記錄條目狀態(tài)對象的副
• 標(biāo)題 — Firefox 目前忽略這個參數(shù)，但未來可能會用到。在此處傳一個空字符串應(yīng)該可以安全的防范未來這個方法的更改。或者，你可以為跳轉(zhuǎn)的state傳遞一個短標(biāo)
• URL — 該參數(shù)定義了新的歷史URL記錄。注意，調(diào)用 pushState() 后瀏覽器并不會立即加載這個URL，但可能會在稍后某些情況下加載這個URL，比如在用戶重新打開瀏覽器時。新URL不必須為絕對路徑。如果新URL是相對路徑，那么它將被作為相對于當(dāng)前URL處理。新URL必須與當(dāng)前URL同源，否則 pushState() 會拋出一個異常。該參數(shù)是可選的，缺省為當(dāng)前UR

實(shí)現(xiàn)

/** 
 * 設(shè)置瀏覽器url 
 *  params：queryObj（參數(shù)對象） 
*/ 
function setBrowserUrl(queryObj){ 
    // stringify是queryString的一個api，具體可以查看node官網(wǎng)，也可以自己實(shí)現(xiàn) 
    var url = `${location.pathname}?${stringify(queryObj)}` 
    history.pushState({url: url}, '', url) 
} 

這樣我們就可以在請求的同時，調(diào)用setBrowserUrl方法來改變?yōu)g覽器url了。接下來我們就可以監(jiān)聽瀏覽器url的變化，如果瀏覽器url有需要的請求參數(shù)，那么我們就根據(jù)請求參數(shù)來請求數(shù)據(jù)，沒有就初始化頁面，這樣當(dāng)我們查看某條記錄或者某個小秘密時，想把該數(shù)據(jù)保存下來并分享給被人，是不是就可以實(shí)現(xiàn)了呢?

總結(jié)

基于H5 history可以實(shí)現(xiàn)很多優(yōu)雅使用的工具，比如路由，緩存控件等等。

本文轉(zhuǎn)載自微信公眾號「趣談前端」