在我看来，问题与 4K cookie 大小限制有关。
您的 shopppingcart 代码试图将所有项目数据存储在 simpleCart cookie 中，但是当此类数据大于 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>
将此产品添加到购物车后，simpleCart cookie 将包含以下字符串：
id=c10||thumb=%3Cimg%20border%3D%220%22%20src%3D%22http%3A//3.bp.blogspot.com/-LcQD--Bb_YE/TeDI44AmUsI/AAAAAAACBw/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.||quantity=1
如您所见，似乎所有类名以item_ 开头的<td> 元素都存储在cookie 中。
Chrome 开发者工具显示此 cookie 的大小为 828 字节。
因此，可以添加到购物车的商品数量是可变的，并且取决于每个商品数据的长度（名称、描述等）。
那么，您可以做些什么来避免这个问题呢？
- 将项目 HTML 标记减少到最少，例如通过删除
item_thumb 和 item_Description 元素。
- 修改
simplecart.js代码中的addToCart方法，通过存储更少的信息来减少cookie的长度（详见下文）。
- 修改
simplecart.js 代码中的createCookie、readCookie 和eraseCookie 函数以使用local storage 而不是cookie 来存储项目数据（查看this page 以获取代码示例，或者下面再举一个例子）。
例如，为了避免在 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时，我们也可以毫无问题地存储thumb和description字段（因为我们有5 Mb的空间），因此我们可以进一步修改ShelfItem.prototype.addToCart函数这样：
...
case "thumb":
case "Description":
case "description":
if (!supports_html5_storage()) break;
...