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。
我通过以下代码进行了处理：

<body>
<script>
function calculate(){



</script>


<script>
$(document).ready(function () {
    dropdowns = {
        web: [
            {desc: "SV", price: 89},
            {desc: "Prog F", price: 190},
            {desc: "Prog O", price: 375},
            {desc: "Prog N", price: 710},
            {desc: "Prog J", price: 58},
            {desc: "Prog K", price: 56},
        ],
        art: [{desc: 'SV', price: 7.00},
              {desc: 'Prog F', price: 32.00},
              {desc: 'Prog O', price: 8.00},
              {desc: 'Prog N', price: 37.00},
              {desc: 'Prog J', price: 9.00},
              {desc: 'Prog K', price: 40.00},
              ],
        blog: [{desc: 'SV', price: 10},
               {desc: 'Prog F', price: 12},
               {desc: 'Prog O', price: 14},
               {desc: 'Prog N', price: 47},
               {desc: 'Prog J', price: 55},
               {desc: 'Prog K', price: 63}
              ],
        press: [{desc: 'SV', price: 27},
                {desc: 'Prog F', price: 37},
                {desc: 'Prog O', price: 47},
                {desc: 'Prog J', price:57},
                {desc: 'Prog K', price:67}
               ]
    }



    populateSelect();

    $(function () {
        $('#cat').change(populateSelect);
    });

    function populateSelect() {
        var cat = $('#cat').val();
        $('#item').empty();

        dropdowns[cat].forEach(function(item) {
            $('#item').append($('<option/>', {
                value: item.price,
                text: item.desc+' = $'+item.price
            }));
        });
    }

});
</script>

<form name="test" method="post" action="check.php">
    <p style="text-align: center;"><span style="color: #800000;"><strong><span style="font-size: x-large; font-family: arial, helvetica, sans-serif;">Order Form</span>
        </strong>
        </span>
    </p>&nbsp;
    <table style="text-align: left; width: 100%; webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px;" border="0" cellspacing="3" cellpadding="2">
        <tbody>
            <tr>
                <td style="font-weight: bold; font-size: 13.5px; font-family: arial, helvetica, sans-serif;" rowspan="1" colspan="2">Personal Information:
                    <hr />
                </td>
            </tr>
            <tr>
                <td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;">Name :</td>
                <td style="vertical-align: top; width: 500px;">
                    <input style="height: 28px; width: 220px;" type="text" name="name" /> <span style="color: #ff0000;">*</span>
                </td>
            </tr>
            <tr>
                <td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;">Email :</td>
                <td style="vertical-align: top; width: 500px;">
                    <input style="height: 28px; width: 220px;" type="text" name="email" /><span style="color: #ff0000;"> *</span>
                </td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td style="font-weight: bold; font-size: 13.5px; font-family: arial, helvetica, sans-serif;" rowspan="1" colspan="2">Receipt:
                    <hr />
                </td>
            </tr>
            <tr>

            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
            <tr>
            <td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;">Exam:</td>
            <td><select id="Exam" onchange="calculate()">
<option selected="selected" disabled="disabled" hidden="" value="">Choose Exam Co-pay</option>
<option value="0">Copay 0</option>
<option value="5">Copay 5</option>
<option value="10">Copay 10</option>
<option value="15">Copay 15</option>
<option value="20">Copay 20</option>
<option value="25">Copay 25</option>
<option value="129">Exam full price</option>
</select>
<td><input id=exam_price size="8" value="0" type="text">
            </tr>
            <tr>

                <td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;">Lens Mat :</td>
                <td>
                    <select name="cat" id="cat">
                        <option value="web">CR-39 </option>
                        <option value="art">Polycarbonate</option>
                        <option value="blog">1.60</option>
                        <option value="press">1.67</option>
                    </select>
                </td>
<td> <input id="item.price" size="8" value="0" type="text">
</td>
</tr>
<tr>
                <td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;">SV or Progressive :</td>
                <td>
                    <select name="item" id="item"></select>
                </td>
                <td> <input id="item.price" size="8" value="0" type="text">
</td>
            </tr>
            <tr>
                <td>
                </td>
            </tr>
            <tr>
            <td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;">AR:</td>
            <td><select id="AR" onchange="calculate()">
<option selected="selected" disabled="disabled" hidden="" value="">Choose AR</option>
<option value="0">No AR</option>
<option value="37"> A</option>
<option value="61">B</option>
<option value="71">C</option>
<option value="85">D</option>
</select>
</td>
 <td> <input id="item.price" size="8" value="0" type="text">
</td>

<tr>
<td>
</td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
</td>
<td>
</td>
</tr>
<tr>
<td style="vertical-align: middle; text-align: right; width: 200px; font-family: arial, helvetica, sans-serif; font-size: 13.5px;">Total:</td>
<td>
</td>
<td><input id="total_price" size="8" value="0" type="text"> <br>
</tr>
        </tbody>
    </table>

</form>

</html>

在通过ajax请求加载新内容之前，我调用beforeNavigate来保存用户当前所做的任何位置信息或状态更改。

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;
}

通过侦听popstate来处理后退和前进按钮。如果我们为数据传递了null值，则e.state将返回null，我们需要通过ajax请求加载存储的url。

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);
    }
}

HTML5 History API - 状态对象的最大大小是多少？

4 个答案: