在家休陪产假，无聊，看自己以前的项目，突然发现之前写的购物车都是用数据库实现的，数据库实现购物车原则上没什么问题，但是需要和数据库交互，这样无意之间降低了程序的效率。今天突发奇想，如果能用HTML5本地存储实现，就会大大增高程序效率。当然，HTML5 本地存储涉及到各个浏览器的兼容性，涉及存储数据的大小(NKB)等问题。在这儿需要说明的是：如果你做一个不大不小的微商城项目，那么你可以尝试使用HTML5本地存储过程实现购物车！
本节和大家探讨下HTML5本地存储实现购物车的功能！
需要说明的是：上篇转发了别人的博客：HTML5本地存储用法，本节利用上节知识实现购物车！
首先讲解下大致思路：
一个商品表中，商品的ID是不相同的，在此，我们借助商品的ID作为JSON的key值，来存储购物车数据。
具体示例如下：
当你点击‘加入购物车’时，执行代码如下：
var pid = $("#hidpid").val();
var color = $("#Procolor").val();
var num2 = $("#spanNum").html(); //����
var bat = { "num": num2, "pid": pid, "pcolor": color };
var batString = JSON.stringify(bat);
var keyName = "bat" + pid;
for (var i = 0; i < localStorage.length; i++) {
if (localStorage.key(i) == keyName) {
localStorage.removeItem(keyName);
}
}
localStorage.setItem("bat"+pid, batString);大致讲解下：
Pid：商品ID
color：商品颜色
num2：商品数量
bat：Json对象
batString：Json对象转化成的字符串
FOr循环：遍历当前所有本地存储，如果已存在的本地存储则删除，重新建立最新的本地存储，当然，也可以不删除，因为同名的Key值，新的会覆盖旧的。
最后，动态存储，所谓动态，就是本地存储的Key值和商品ID结合了。也就是说：不同的商品，将会存储为不同的Key值，N个商品，将会存储为N个Json字符串。最后，我们只需解析这N个不同的字符串，就会得到一个完整的购物车！
嘻嘻，简单吧！
那么怎样才能遍历这N个JSON字符串呢？如下：
购物车加载页面：
$(function () {
for (var i = 0; i < localStorage.length; i++) {
var localValue = localStorage.getItem(localStorage.key(i));
var key = localStorage.key(i);
if (key != "bat"&&key.indexOf("bat")>=0) {
var obj = $.parseJSON(localValue);
var pid = obj.pid;
var num = obj.num;
var color = obj.pcolor;
