javascript - 购物车 : Cookies only holding 2 - 5 items

Question

对于具有 javascript 技能的人来说，这可能是一个简单的修复(轻松 +200 声望)。

问题演示:http://shoppingcart-bthub.blogspot.com/只需将所有商品添加到购物车并单击刷新即可查看 cookie 的问题。

除处理添加到购物车中的商品的 cookie 的代码部分外，一切正常。出于某种原因，它只包含 2 -5 个项目，具体取决于浏览器:

Google Chrome - 仅保留 2 件商品(购物车中的所有其他商品在页面重新加载后消失)

Firefox - 共 4 项

Safari - 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 模板以上传到 blogger:http://www.bloggermint.com/2011/05/shopping-cart-blogger-template/免费下载位于左侧边栏中。还要按照该页面上的说明在 blogger.com 中运行

Answer 1

我认为问题与 4K cookie 大小限制有关。
你的shopppingcart代码试图将所有项目数据存储在 simpleCart 中cookie，但是当此类数据大于 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||thumb=%3Cimg%20border%3D%220%22%20src%3D%22http%3A//3.bp.blogspot.com/-LcQD--Bb_YE/TeDI44AmUsI/AAAAAAAACBw/K4IJZE2CpMY/s1600/sony+vaio.JPG%22%3E%0A||name=Sony%20VPCEE42FX%2015.5%22%202.30GHz%20500GB%20VAIO%20Laptop||price=610||description=The%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

如您所见，似乎所有 <td>类名以 item_ 开头的元素存储在 cookie 中。
Chrome 开发者工具显示此 cookie 的大小为 828 字节。
因此，可以添加到购物车的商品数量是可变的，取决于每个商品数据(名称、描述等)的长度。
那么，您可以做些什么来避免这个问题呢？

1. 将项目 HTML 标记减少到最少，例如通过删除 item_thumb和 item_Description元素。
2. 修改addToCart simplecart.js 中的方法通过存储更少的信息来减少 cookie 长度的代码(详情见下文)。
3. 修改createCookie , readCookie和 eraseCookie在 simplecart.js 中发挥作用使用代码 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;
  ...