1. history 是什么？
window上的一個對象，由來存儲瀏覽器訪問過的歷史
2. 用途：
可以動態跳轉任意一個已在歷史記錄中的地址
3..history方法：
1.forward() : 向后翻一頁
2. back(): 回退一頁
3. go(num) : num為負值時 表示回退 num為正值時表示前進
4. pushState(data, title, url): 添加一條歷史記錄，受同源策略限制，添加歷史紀錄后頁面地址改變但是頁面不會更新——H5新增的方法 IE9以下不兼容 5. replaceState(data, title, url) 替換當前的歷史記錄，受同源策略限制，添加歷史紀錄后頁面地址改變但是頁面不會更新 —— H5新增的方法 IE9以下不兼容 4. history事件：
1.popstate: 每次地址改變時觸發，注：pushSate和replaceState的時候不會觸發該事件。只有當用戶點擊回退或前進按鈕或者調用back , forward, go方法才會觸發這個事件
2.hashchange: 地址欄中hash值改變的時候會觸發
data：一個與指定網址相關的狀態對象，popstate事件觸發時，該對象會傳入回調函數中。如果不需要這個對象，此處可以填null。 title：新頁面的標題，但是所有瀏覽器目前都忽略這個值，因此這里可以填null。 url：新的網址，必須與當前頁面處在同一個域。瀏覽器的地址欄將顯示這個網址。
案例1：
history.forward() //前進一頁
history.back() //回退一頁
history,go(2) // 前進兩頁
history.go(-2) // 回退兩頁
console.log(history.length) // 打印擋牆歷史記錄的條數
案例2： 以下代碼在服務器環境下
假設當前網址為
http://localhost/index.html 使用pushState在歷史記錄里面添加一條歷史記錄
history.pushState({
page: 'page1'
}, 'page-1', './page.html');
打開當前的地址，會發現頁面里面顯示的內容為index.html里面的內容但是地址變為
http://localhost/page.html ,這是因為pushState是向歷史記錄添加一條記錄但是不會刷新頁面。點擊回退按鈕地址欄會變化為index.html
即： pushState方法不會觸發頁面刷新，只是導致history對象發生變化，地址欄的顯示地址發生變化
案例3：
假設當前網址為
http://localhost/index.html 使用replaceState在歷史記錄里面替換一條歷史記錄
history.pushState({
page: 'page1'
}, 'page-1', './page.html');
打開當前的地址，會發現頁面里面顯示的內容為index.html里面的內容但是地址變為
http://localhost/page.html ,點擊回退按鈕不會跳轉到index.html頁面，這是因為replaceState是在歷史記錄里面替換當前的記錄，頁面仍然不會刷新。
即： replaceState方法不會觸發頁面刷新，只是導致history對象發生變化，地址欄的顯示地址發生變化
案例4:
假設當前網址為
http://localhost/index.html
1 history.pushState({ 2 num: 1 3 }, 'title-history', '?num=1'); 4 history.pushState({ 5 num:2 6 }, 'title-history', '?num=2'); 7 history.pushState({ 8 num: 3 9 }, 'title-history', '?num=3'); 10 history.replaceState({ 11 num: 4 12 }, 'title-history', '?num=4'); 13 window.addEventListener('popstate', function (e) { 14 //打印當前頁面的數據（狀態信息） 15 console.log(e.state); 16 console.log(history.state) 17 }, false) 18 19 // 當前頁面地址為 http://localhost/index.html?num=4 以下代碼均在瀏覽器控制台里面觸發 20 // history.back() // 當前頁面地址為 http://localhost/index.html?num=2 21 // history.forward() // 當前頁面地址為 http://localhost/index.html?num=4' 22 // history.go(-2) // 當前頁面地址為 http://localhost/index.html?num=1
案例4： 實現過濾效果
初始效果：
搜索關鍵詞后的效果：
點擊回退按鈕之后的效果
1 代碼： 2 <!DOCTYPE html> 3 <html lang="en"> 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>Document</title> 9 <style> 10 .content { 11 width: 300px; 12 height: 300px; 13 border: 1px solid #000; 14 } 15 </style> 16 </head> 17 <body> 18 <input type="text" id="words"> 19 <input type="button" value="搜索" id="btn"> 20 <div class="content"> 21 <ul id="showData"> 22 </ul> 23 </div> 24 <script> 25 var words = document.getElementById('words'); 26 var data = [{ 27 name: 'HTML', 28 id: 'html' 29 }, { 30 name: 'CSS', 31 id: 'css' 32 }, { 33 name: 'JavaScript', 34 id: 'js' 35 }, { 36 name: 'es6', 37 id: 'es6' 38 }, { 39 name: 'es5', 40 id: 'es5', 41 }]; 42 function renderDom(data) { 43 var str = ''; 44 data.forEach(function (item, index) { 45 str += '<li>' + item.name + '</li>'; 46 }); 47 showData.innerHTML = str; 48 } 49 renderDom(data); 50 btn.onclick = function (e) { 51 var filterData = data.filter(function (item, index) { 52 return item.name.indexOf(words.value) > -1; 53 }); 54 history.pushState({ 55 word: words.value 56 }, null, '?word=' + words.value); 57 renderDom(filterData); 58 } 59 window.onpopstate = function (e) { 60 console.log(e); 61 var key = e.state ? e.state.word : ''; 62 var filterData = data.filter(function (item, index) { 63 return item.name.indexOf(key) > -1; 64 }); 65 renderDom(filterData); 66 words.value = key; 67 } 68 </script> 69 </body> 70 </html>
歡迎加入web前端沖擊頂級高薪大廠學習群，群聊號碼：820269529