HTML5 History API - 狀態對象的最大大小是多少？

Question

pushState方法接受狀態對象。 Firefox文檔稱該對象的最大大小為640kb。 是否在規范中定義了瀏覽器可以實現的最小最大大小是多少？ 我可以合理地期望主流瀏覽器能為我提供至少100kb的數據嗎？

編輯：我用Chrome測試了它，它仍然適用於超過1MB的狀態對象。

Answer 1

規范沒有規定限制，但是各種瀏覽器都有自己的限制。

Firefox有很好的文檔，正如你所說，它是640kB（“任何人都需要的RAM”）。

我無法在任何地方找到Chrome或Internet Explorer，但一些快速測試顯示：

Chrome工作至少10MB（可能還有更多），

IE達到1MB的限制（在IE11中，這是我所有的方便）。

因此，總結一下未來的人們：history.state對象大小限制為：Firefox為640kB ，Internet Explorer 11為1MB ，Chrome為至少 10Mb 。

編輯：測試的版本：IE：11，Chrome：33，Firefox：不相關，因為他們為您記錄MDN上的最大大小:)。

Answer 2

不。這里的規范性文件是http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#dom-history-pushstate ，它甚至沒有提到數據的限制尺寸。 但是，建議使用不同的限制：

用戶代理可以限制每頁添加到會話歷史記錄的狀態對象的數量。

正如您在此示例中所看到的，規范通常避免提及任何硬限制，並由瀏覽器制造商自行決定。 因此，即使未來某個時候修改規范以考慮數據大小限制的可能性，也不太可能給出實數。 相反，它將“對於常見用例來說足夠大”。

Answer 3

只看到MDN告訴FireFox將大小限制為640K，不知道其他瀏覽器。 https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history

Answer 4

辛苦地說，我有一個超過IE11字符限制的頁面。 我做了一個子字符串操作來獲得精確的字符數，因為我無法在任何地方找到它。 答案是（至少在IE11上）允許將524282個字符傳遞給pushState / replaceState。
我通過以下代碼處理：

function pushState(data, title, url) {
  if (data.length > 524282) {
      //can't push the data to the History API--pass null
      history.pushState(null, title, url);
      history.replaceState(null, title, url);
  }
  else {
    history.pushState(data, title, url);
    history.replaceState(data, title, url);
  }
    document.title = title;
}

在通過ajax請求加載新內容之前，我調用beforeNavigate來保存用戶所做的任何當前位置信息或狀態更改。

function beforeNavigate(){
    if ($("#container").html().length <= 524282) {
        //save current state to history before navigating via ajax
        history.replaceState($("#container").html(), document.title, window.location.pathname);
    }
}

通過聽popstate來處理后退和前進按鈕。 如果我們為數據傳遞null值，那么e.state將返回null，我們需要通過ajax請求加載存儲的url。

window.addEventListener('popstate', function (e) {
    if (e.state!=null) {
        $("#container").html(e.state);
    }
    else {
        //load the partialpage into the container(a full html page is not returned by the ajax query for my site)
        $.ajax({
            url: location.href,
            type: "GET",
            success: function (data) {
                $('#container').html(data);
            }
         });
    }
});