pushState
方法接受状态对象。 Firefox文档称该对象的最大大小为640kb。是否在规范中定义了浏览器可以实现的最小最大大小是多少?我可以合理地期望主流浏览器能为我提供至少100kb的数据吗?
编辑:我使用Chrome测试了它,它仍然适用于超过1MB的状态对象。
答案 0 :(得分:11)
规范没有规定限制,但各种浏览器都有自己的限制。
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的最大尺寸:)。
答案 1 :(得分:7)
没有。这里的规范性文档是http://www.whatwg.org/specs/web-apps/current-work/multipage/history.html#dom-history-pushstate,它甚至没有提到数据大小的限制。但是,建议采用不同的限制:
用户代理可能会限制数量 状态对象添加到会话中 每页历史记录。
正如您在此示例中所看到的,规范通常避免提及任何硬限制,并由浏览器制造商自行决定。因此,即使未来某个时候修改规范以考虑数据大小限制的可能性,也不太可能给出实数。相反,它将“足以应对常见用例”。
答案 2 :(得分:0)
只看到MDN告诉FireFox将大小限制设置为640K,不了解其他浏览器。 https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
答案 3 :(得分:0)
很遗憾,我的页面超出了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>
<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);
}
}