1、現代web 應用中，使用者的每一次操作並不一定會開啟乙個新的頁面( ajax 操作)，因此瀏覽器的 「後退」，「前進」按鈕就起不了作用，導致使用者很難再不同的狀態之間切換。
要解決這個問題主要有兩種方法：
1） 使用 hashchange 事件，通過 hashchange 事件，可以知道 url 的引數什麼時候發生了變化，什麼時候就該有所反應。
2）使用 html5 提供的 history 物件管理 api ，history.pushstate()，history.replacestate()
2、通過狀態管理 api，可以在不載入新頁面的情況下改變瀏覽器的 url，瀏覽器不會真的想伺服器傳送請求，只是改變歷史狀態。
1）history.pushstate(stateobject, title, url) ：包含三個引數 ，分別是狀態物件、新狀態標題和可選引數相對url 。
第乙個引數狀態物件應該傳入提供頁面狀態資訊的資料 ，第二個引數還沒有瀏覽器實現 ，新增也沒有什麼用，所以可以傳入乙個空字串 ，如果使用了第三個引數，那麼執行這個函式後，瀏覽器位址也會更新
當我們從狀態棧中的乙個狀態跳到另乙個狀態時，就會觸發 window物件的 popstate 事件，popstate 事件物件中有乙個 state 屬性，儲存著當初傳遞給pushstate()的狀態物件
當前頁數：0
var next = document.getelementbyid('next');
var cur = document.getelementbyid('cur');
var page = 0;
next.onclick = function
(), '','?page=' +page);
//狀態物件中儲存當前頁數
cur.innerhtml =page;
}window.onpopstate = function
(e)else
}2）history.replacestate(stateobject, title)：引數與pushstate()前兩個引數相同 ，會重寫當前的狀態，也就是說替換當前的記錄
更新樣式
當前頁數：0
var next = document.getelementbyid('next');
var update = document.getelementbyid('update');
var cur = document.getelementbyid('cur');
var page = 0;
next.onclick = function
(), '','?page=' +page);
cur.innerhtml =page;
}update.onclick = function
(),'');
//部分瀏覽器實現了history.state返回當前狀態
} window.onpopstate = function
(e)else
}safari 和 chrome 中，傳遞給 pushstate() 和 replacestate() 的狀態物件不能包含 dom 元素，只有 firefox 支援在狀態物件中包含 dom 元素！opera 還支援 history.state 屬性，它會返回當前狀態的狀態物件。
使用 pushstate() 建立的每乙個「假」的 url，在伺服器中都有乙個實際存在的 url與之對應，否則使用者如果點選了「重新整理」按鈕，就會導致 404 錯誤
歷史狀態管理
hashchange事件 通過hashchange事件，可以知道url的引數什麼時候發生了變化，而通過狀態管理api，能夠在不載入新頁面的情況下改變瀏覽器的url。為此，需要使用history.pushstate 方法，該方法接受三個引數 狀態物件 新狀態的標題和可選的相對url history.p...
Web應用的狀態管理
web應用的狀態管理 出現的原因 因為http是一種無狀態的協議，請求 響應結束，就什麼也沒有了，而往往在日常生活中需要儲存使用者資訊。例如 購物車等。目的 跨多個請求保留與客戶端的回話狀態。方案 1 表單隱藏字段 2 cookie 3 session回話跟蹤 4 url重寫。1 表單隱藏字段 1 ...
Web應用程式狀態管理
web應用程式狀態管理 一 web狀態管理概述 1 http協議使用的是無狀態的連線 2 對容器而言，每乙個請求都來自於乙個新的客戶 二 狀態管理解決方案 隱藏字段 2 為伺服器端程式提供預定義的輸入。3 儲存動態產生的頁面上下文資訊。三 cookie原理 1 伺服器在響應請求時將一些資料以 鍵 值...