Loo*_*oop 4 javascript variables cookies shopping-cart session-cookies
一切正常,除了处理添加到购物车的项目的cookie的代码部分.出于某种原因,它只能容纳2到5个项目,具体取决于broswer:
谷歌浏览器 - 仅包含2项(购物车中的所有其他项目在页面重新加载后消失)
Firefox - 总共4项
野生动物园 - 4
互联网探索者 - 5
演示中的javascript:http: //shopppingcart.googlecode.com/files/simplecart.js
上面javascript链接的一部分被编码为处理cookie:
/*** data storage and retrival ****/
/* load cart from cookie */
me.load = function () {
var me = this;
/* initialize variables and items array */
me.items = {};
me.total = 0.00;
me.quantity = 0;
/* retrieve item data from cookie */
if( readCookie('simpleCart') ){
var data = unescape(readCookie('simpleCart')).split('++');
for(var x=0, xlen=data.length;x<xlen;x++){
var info = data[x].split('||');
var newItem = new CartItem();
if( newItem.parseValuesFromArray( info ) ){
newItem.checkQuantityAndPrice();
/* store the new item in the cart */
me.items[newItem.id] = newItem;
}
}
}
me.isLoaded = true;
};
/* save cart to cookie */
me.save = function () {
var dataString = "";
for( var item in this.items ){
dataString = dataString + "++" + this.items[item].print();
}
createCookie('simpleCart', dataString.substring( 2 ), 30 );
};
有关包含所有代码的完整实时模板,请在blogger.com上打开免费博客并在此处下载XML模板以上传到博主:http://www.bloggermint.com/2011/05/shopping-cart-blogger-template /免费下载在左侧边栏.也请按照该页面上的说明在blogger.com上进行操作
小智 6
在我看来,问题与4K cookie大小限制有关.
您的shopppingcart代码正在尝试将所有项目数据存储在simpleCartcookie中,但是当这些数据大于4K时,项目不会存储到cookie中,即使它们已在购物车中显示,因此当重新加载页面时,这些项目会消失.
例如,请考虑网站http://shoppingcart-bthub.blogspot.in/,特别是"Sony VAIO laptop"项目的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 ||拇指=%3Cimg%20border%3D%220%22%20src%3D%22http%3A // 3.bp.blogspot.com/-LcQD - Bb_YE/TeDI44AmUsI/AAAAAAAACBw/K4IJZE2CpMY/S1600 /索尼+ vaio.JPG%22%3E%0A ||名称=索尼%20VPCEE42FX%2015.5%22%202.30GHz%20500GB%20VAIO%20Laptop ||价格= 610 ||描述=的%20VPCEE42FX%图20是%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%第二十条%20memory.%第二十条%2015.5%20HD%20resolution%20screen%20于是%20AMD%20Mobility%20%0ARadeon%20HD%20graphics%20card%20ensure%20that%20youll%20see%20crisp%2C%20fast%20action %2C%20even%20%0Awhen%20youre%20watching%20DVDs%20on%第二十条%20DVD%20drive.%20于是%20AT%20under%20six%20pounds%2C%第二十条%20%0Alaptop%图20是%20easy%20to%20pack% 20up%20于是%20haul%20with%20you.||量= 1
如您所见,似乎所有<td>具有类名称的元素item_都存储在cookie中.
Chrome开发者的工具显示此Cookie的大小为828字节.
因此,可以添加到购物车的商品数量是可变的,并且取决于每个商品数据的长度(名称,描述等).
那么,你能做些什么来避免这个问题呢？
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我们也可以毫无问题地存储thumb和description字段(因为我们有5 Mb的空间),因此我们可以通过ShelfItem.prototype.addToCart这种方式进一步修改函数:
...
case "thumb":
case "Description":
case "description":
if (!supports_html5_storage()) break;
...