Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>In my opinion the problem is related to the 4K cookie size limit.<br> Your <code>shopppingcart</code> code is trying to store all the items data in a <code>simpleCart</code> cookie, but when such data gets bigger than 4K the items are not stored into the cookie, even if they're showed in the cart, therefore when the page is reloaded those items disappear.<br> Consider for example the site <a href="http://shoppingcart-bthub.blogspot.in/" rel="nofollow noreferrer">http://shoppingcart-bthub.blogspot.in/</a>, and specifically the HTML markup for the "Sony VAIO laptop" item:<br></p> <pre><code>&lt;table border="1" style="width: 660px;"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th class="item_thumb" id="thumb" width="45%"&gt;&lt;img border="0" src="http://3.bp.blogspot.com/-LcQD--Bb_YE/TeDI44AmUsI/AAAAAAAACBw/K4IJZE2CpMY/s1600/sony+vaio.JPG"&gt;&lt;/th&gt; &lt;td&gt; &lt;input class="item_add" type="button" value="Add to Cart" id="s1"&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;&lt;b&gt;Item Name&lt;/b&gt;&lt;/th&gt; &lt;td class="item_name"&gt;Sony VPCEE42FX 15.5" 2.30GHz 500GB VAIO Laptop&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;&lt;b&gt;Price&lt;/b&gt;&lt;/th&gt; &lt;td class="item_price"&gt;$610.00&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;&lt;b&gt;Description&lt;/b&gt;&lt;/th&gt; &lt;td class="item_Description"&gt; 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. &lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;th&gt;&lt;b&gt;Available Stock&lt;/b&gt;&lt;/th&gt; &lt;td&gt;2 more available&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>When this product is added to the cart, the <code>simpleCart</code> cookie will contain the following string:<br></p> <blockquote> <p>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</p> </blockquote> <p>As you can see, it seems that all the <code>&lt;td&gt;</code> elements with a class name starting with <code>item_</code> are stored in the cookie.<br> Chrome Developer's Tools shows a size of 828 bytes for this cookie.<br> Therefore the number of the items that can be added to the cart is variable and depends by the length of each item data (name, description, etc.).<br> So, what can you do to avoid this problem?<br> </p> <ol> <li>Reduce the item HTML markup to the minimum, for example by removing the <code>item_thumb</code> and <code>item_Description</code> elements.</li> <li>Modify the <code>addToCart</code> method in the <code>simplecart.js</code> code to reduce the lenght of the cookie by storing less information (see below for details).</li> <li>Modify the <code>createCookie</code>, <code>readCookie</code> and <code>eraseCookie</code> functions in the <code>simplecart.js</code> code to use <a href="http://diveintohtml5.info/storage.html" rel="nofollow noreferrer">local storage</a> instead of a cookie to store item data (have a look at <a href="https://github.com/wojodesign/simplecart-js/blob/master/simpleCart.js" rel="nofollow noreferrer">this page</a> for a code sample, or below for another example).</li> </ol> <p>For example, to avoid the storing of the "thumb" and "Description" item fields in the cookie, you could modify the <code>addToCart</code> method as follows:<br></p> <pre><code>ShelfItem.prototype.addToCart = function () { var outStrings = [],valueString; for( var field in this ){ if( typeof( this[field] ) != "function" &amp;&amp; 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 ); } } } </code></pre> <p>A much better approach would be to use <code>localStorage</code> if the browser supports it, otherwise use cookies as a fallback:</p> <pre><code>function supports_html5_storage() { try { return 'localStorage' in window &amp;&amp; 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 &lt; 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); } } </code></pre> <p>When using <code>localStorage</code> we can also store the <code>thumb</code> and <code>description</code> fields without problems (since we have 5 Mb of space), therefore we can further modify the <code>ShelfItem.prototype.addToCart</code> function this way:<br></p> <pre><code> ... case "thumb": case "Description": case "description": if (!supports_html5_storage()) break; ... </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POShopping cart: Cookies only holding 2 - 5 items
      singulars
      1. PTQuestion
    1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POShopping cart: Cookies only holding 2 - 5 items
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThank you so very much! This information was extremely helpful. I removed all the descriptions from every post using a simple CSS code in the template and it worked! Could you perhaps recode it to where it shows everything as it is minus the description from every cookie? Obviously I don't need the description to be in the cookie. But I want the thumb, by the time it gets transfered to the cookie, it's a tiny thumb, so I want that to stay. If you do this for me and it works, I will award you the +200.
      singulars
      1. PO
      1. USLoop
    2. COI am just taking a guess here because I don't know js code, but if I remove: case "image": valueString = this[field].src; break; case "thumb": from your above code, it will still show the image thumb and still be a valid working code, is this right?
      singulars
      1. PO
      1. USLoop
    3. COI added an upvote to your answer @Enzino because of the very informed answer. I like to learn and gain knowledge and this answer has helped with that and also addressed the question directly. Just need my question above answered to award you the selected answer and +200.
      singulars
      1. PO
      1. USLoop
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload