请教大牛：用JavaScript实现购物车问题

看了几个购物车，都是采用对象方法，还是完全没有思路，也不太明白如何把html部分代码作为“对象”插入到购物车方法中（比如shopCart.addItem(item)）。

是否可以将购物车数据通过json存储，显示通过保存的json文件提取？

购物车相关数据计划用JSON储存，考虑到用户可能会跳转页面，就需要localStorage /sessionStorage功能。
看了几个购物车，都是对象数组的操作（添加+删除+更新，是否满足最低消费，是否有折扣）等，我很好奇如何把html内的部分内容如何添加到购物车内。

建立好你的js类就有好了,楼主去了解下js的面向对象，localStorage存储不了对象，你直接序列化产品数组成字符串，从localStorage中获取数据后重新生成就行了，至于实时更新，你添加text的blur事件，radio和check的click事件，更新下dom对象和cart就好了
给个模型给你，其他需求自己扩展下就好了
    function Product(name, price, num, id, belongid) {
        this.name = name; //产品名称
        this.price = price;//价格
        this.num = num; //数量
        this.id = id; //产品唯一id
        this.belongid = belongid; //配件属于哪个产品的id，如果不是配件就设置为0或-1什么的
    }
    function Cart(key) {
        var sc = localStorage[key];
        if (sc) try { this.products = JSON.parse(sc); } catch (ex) { }        if (!this.prodocuts) this.products = [];
    }
    Cart.prototype.findProduct = function (id) {//通过id查找产品所在数组下标
        for (var i = 0; i < this.products.length; i++) if (this.products[i].id == pro.id) return i;
        return -1;
    }
    Cart.prototype.add = function (pro) {
        var index = this.findProduct(pro.id);
        if (index != -1) this.products[index] = pro.num;//存在则只需要更新数量就行了
        else this.products.push(pro);
    }
    Cart.prototype.remove = function (id) { var index = this.findProduct(pro.id); if (index != -1) this.products.splice(index, 1); }
    Cart.prototype.toString = function () { return JSON.stringify(this.products); } //重写toString方法，将产品序列化为字符串
    Cart.prototype.save = function (key) { localStorage[key] = this.toString(); }    //使用和实例名称
    var shopCart
    window.onload = function () {
        shopCart = new Cart('shopingcart');
        //通过你上面的DOM对象初始化cart对象，或者通过ajax获取产品对象，然后add下
        console.log(shopCart)
    }
    window.onbeforeunload = function () { shopCart.save('shopingcart'); }//页面卸载时保存

localStorage ie8-不支持，需要用userData Behavior，可以参考这个：JavaScript本地存储(DOM Storage,Local Storage)IE7-不支持JSON对象，你需要导入json2.js这个文件

Showbo，非常感谢你的耐心回复和代码，我好好研究研究，因为主要是做移动端，localStorage/sessionStorage/JSON应该不成问题。
另外想请教下：“//通过你上面的DOM对象初始化cart对象”，这个是什么意思，DOM对象初始化Cart对象，不是太理解这个概念，能否解释一下，非常感谢！

Showbo，非常感谢你的耐心回复和代码，我好好研究研究，因为主要是做移动端，localStorage/sessionStorage/JSON应该不成问题。
另外想请教下：“//通过你上面的DOM对象初始化cart对象”，这个是什么意思，DOM对象初始化Cart对象，不是太理解这个概念，能否解释一下，非常感谢！要用localstorage存储的话完全不需要和服务器交互（除非需要登录的用户离开你的站点，你需要下次他登陆的时候显示上一次的购物车信息的时候才需要和客户端交互，为了访问者防止清空本地存储），只有购买的时候将存储的数据发送到服务器就行了，然后清空下localstorage。    function Cart(key) {
        var sc = localStorage[key];
        if (sc) try { this.products = JSON.parse(sc); } catch (ex) { }

        if (!this.prodocuts) this.products = [];
    }
生成购物车的实例的时候已经从localstorage初始化过了，如果有其他的才需要后续的步骤，就是“//通过你上面的DOM对象初始化cart对象”，这个是什么意思，DOM对象初始化Cart对象”，有可能你进入的页面有localstorage未存储的其他物品

1 采用JavaScript编写，数据通过Ajax从后台提取，用HTML5的 localStorage / sessionStorage 做数据储存；
//使用session记录更好，更安全，不易出错。数据库设置购买状态，进入购物车（付款前）为0，这样就很方便根据用户名提取购物车信息，期间通过ajax存取。2 每件商品可购买多次，比如点击 iPhone两次，价格就是560*2=1120了；//不能这么做，应该增加一个select，可以选择买2台3台4台……
3 如果商品有配件，就显示配件区域；
//这是后台数据表设置问题，存取和主件关联的配件。
4 可能这样购买商品：先买一件标准价格的商品，然后买一件标准价格+多个配件的同样商品；
//设置套餐数据表，套餐12345……，这样数据结构就变成了：套餐---主件及各类配件，当然配件也可以自己做成另外一个表。
5 如果购买配件，那么配件价格和相关商品价格统一计算；
//价格设置简单问题，状态01即可解决....................
6 最下面的商品件数（不包括配件）和总价格是实时更新的。
//完全不需要，实时更新耗费资源，拖慢速度。卖个东西用不着实时更新。后台解决一个订单，更新下信息，一般会在下一个用户来访时更新。因为你的浏览者不会达到毫秒数级别。

调试易

请教大牛：用JavaScript实现购物车问题

解决方案 »