在我看来，这个问题与 4K cookie 大小限制有关。
您的shopppingcart代码正在尝试将所有项目数据存储在simpleCartcookie 中，但是当此类数据大于 4K 时，即使它们显示在购物车中，这些项目也不会存储到 cookie 中，因此当重新加载页面时，这些项目会消失. 以网站http://shoppingcart-bthub.blogspot.in/
为例，特别是“Sony VAIO 笔记本电脑”项目的 HTML 标记：
<table border="1" style="width: 660px;">
<tbody>
<tr>
<th class="item_thumb" id="thumb" width="45%"><img border="0" src="http://3.bp.blogspot.com/-LcQD--Bb_YE/TeDI44AmUsI/AAAAAAAACBw/K4IJZE2CpMY/s1600/sony+vaio.JPG"></th>
<td>
<input class="item_add" type="button" value="Add to Cart" id="s1">
</td>
</tr>
<tr>
<th><b>Item Name</b></th>
<td class="item_name">Sony VPCEE42FX 15.5" 2.30GHz 500GB VAIO Laptop</td>
</tr>
<tr>
<th><b>Price</b></th>
<td class="item_price">$610.00</td>
</tr>
<tr>
<th><b>Description</b></th>
<td class="item_Description">
The VPCEE42FX is big enough to be useful, but small
enough to be portable. With 500GB of hard drive space, youll have to work hard
to fill up the memory. The 15.5 HD resolution screen and AMD Mobility Radeon HD
graphics card ensure that youll see crisp, fast action, even when youre watching
DVDs on the DVD drive. And at under six pounds, the laptop is easy to pack up
and haul with you.
</td>
</tr>
<tr>
<th><b>Available Stock</b></th>
<td>2 more available</td>
</tr>
</tbody>
</table>
当将此产品添加到购物车时，simpleCartcookie 将包含以下字符串：
id=c10||thumb=%3Cimg%20border%3D%220%22%20src%3D%22http%3A//3.bp.blogspot.com/-LcQD--Bb_YE/TeDI44AmUsI/AAAAAAAAACBw/K4IJZE2CpMY/s1600/sony +vaio.JPG%22%3E%0A||name=Sony%20VPCEE42FX%2015.5%22%202.30GHz%20500GB%20VAIO%20Laptop||price=610||description=%20VPCEE42FX%20is%20big%20enough%20to %20be%20useful%2C%20but%20small%20enough%20to%20be%20%0Aportable.%20With%20500GB%20of%20hard%20drive%20space%2C%20youll%20have%20to%20work%20hard%20to%20% 0Afill%20up%20the%20memory.%20The%2015.5%20HD%20resolution%20screen%20and%20AMD%20Mobility%20%0ARadeon%20HD%20graphics%20card%20ensure%20that%20youll%20see%20crisp%2C%20fast%20action %2C%20even%20%0Awhen%20youre%20watching%20DVDs%20on%20the%20DVD%20drive.%20And%20at%20under%20six%20pounds%2C%20the%20%0Alaptop%20is%20easy%20to%20pack% 20up%20and%20haul%20with%20you.||数量=1
如您所见，似乎所有<td>以类名开头的元素item_都存储在cookie中。
Chrome 开发者工具显示此 cookie 的大小为 828 字节。
因此，可以添加到购物车的商品数量是可变的，并且取决于每个商品数据的长度（名称、描述等）。
那么，你能做些什么来避免这个问题呢？
- 将项目 HTML 标记减少到最低限度，例如通过删除
item_thumb和 item_Description元素。
- 修改代码中的
addToCart方法，simplecart.js通过存储更少的信息来减少cookie的长度（详见下文）。
- 修改代码中的
createCookie,readCookie和eraseCookie函数simplecart.js以使用本地存储而不是 cookie 来存储项目数据（查看此页面以获取代码示例，或在下面查看另一个示例）。
例如，为了避免在 cookie 中存储“thumb”和“Description”项字段，您可以修改addToCart方法如下：
ShelfItem.prototype.addToCart = function () {
var outStrings = [],valueString;
for( var field in this ){
if( typeof( this[field] ) != "function" && field != "id" ){
valueString = "";
//console.log(field);
switch(field){
case "price":
if( this[field].value ){
valueString = this[field].value;
} else if( this[field].innerHTML ) {
valueString = this[field].innerHTML;
}
/* remove all characters from price except digits and a period */
valueString = valueString.replace( /[^(\d|\.)]*/gi , "" );
valueString = valueString.replace( /,*/ , "" );
break;
case "image":
valueString = this[field].src;
break;
case "thumb":
case "Description":
case "description":
/* don't store "thumb" and "description" in the cookie */
break;
default:
if( this[field].value ){
valueString = this[field].value;
} else if( this[field].innerHTML ) {
valueString = this[field].innerHTML;
} else if( this[field].src ){
valueString = this[field].src;
} else {
valueString = this[field];
}
break;
}
outStrings.push( field + "=" + valueString );
}
}
}
如果浏览器支持，更好的方法是使用localStorage它，否则使用 cookie 作为后备：
function supports_html5_storage() {
try {
return 'localStorage' in window && window['localStorage'] !== null;
} catch (e) {
return false;
}
}
function createCookie(name,value,days) {
if (supports_html5_storage()) {
if (value == '') {
eraseCookie(name);
} else {
window.localStorage.setItem(name, JSON.stringify(value));
}
} else {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+value+expires+"; path=/";
}
}
function readCookie(name) {
if (supports_html5_storage()) {
return window.localStorage.getItem(name);
} else {
var ca = document.cookie.split(';');
var nameEQ = name + "=";
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,c.length);
}
return null;
}
}
function eraseCookie(name) {
if (supports_html5_storage()) {
window.localStorage.removeItem(name);
} else {
createCookie(name,"",-1);
}
}
使用时localStorage我们也可以毫无问题地存储thumband字段（因为我们有 5 Mb 的空间），因此我们可以这样进一步修改函数：descriptionShelfItem.prototype.addToCart
...
case "thumb":
case "Description":
case "description":
if (!supports_html5_storage()) break;
...