利用html5的本地存儲寫的一個購物車

好久沒有寫博客園了，很多知識沒有記錄下來；可惜；

這幾天在開發微信，也寫了一個訂餐平台的微網站，里面需要寫一個購物車；

這里主要是把商品的部分信息以json格式保存在sessionstorage中，還有商店信息也是；

以json格式保存有什么好處呢，輕量級的傳輸，大概是這樣吧！另外，如果我們把商品信息分開存儲，就會導致有多條的sessionstorage項，那以后實現在兩家商店同時購物的話，就不可能區分每家商店的商品了；

 

如果代碼是自己寫的，就有版權，這么說、對吧，是在軟件工程師書上看到的；

不多說，我喜歡的是上代碼；

 

在點擊商品的時候，我們就把商品加入購物車，這個功能：其中利用了JSON.stringfy()和JSON.parse()進行轉換

function addgood(id, price, name) {//在界面渲染的時候已經把商品信息參數整合到自己的函數中了
        var contact = new Object();//單個商品的對象，暫時介質
        var goodobj = new Object();//商品對象
        var memberfilter = new Array();//商品信息
        memberfilter[0] = "id";
        memberfilter[1] = "name";
        memberfilter[2] = "sum";
        memberfilter[3] = "price";
        if (typeof (sessionStorage.good) == "undefined") {//此時沒有商品
            contact.id = parseInt(id);
            contact.name = name;
            contact.sum = 1;
            contact.price = parseInt(price);
            var good = new Array();
            var jsonText = JSON.stringify(contact, memberfilter);
            good[0] = JSON.parse(jsonText);
            sessionStorage.good = JSON.stringify(good, memberfilter);

        }
        else {//有商品，要判斷商品在本地是否有存儲，有的話sum+1
            //取數據
            goodobj = JSON.parse(sessionStorage.good);
            var con = 0;
            for (var i = 0; i < goodobj.length; i++) {
                if (goodobj[i].id == id) {
                    goodobj[i].sum = 1 + parseInt(goodobj[i].sum);
                    sessionStorage.good= JSON.stringify(goodobj, memberfilter);
                    con++;
                    break;
                }
            }
            if (con == 0) {//沒有該商品，新建一個進去
                contact.id = parseInt(id);
                contact.name = name;
                contact.sum = 1;
                contact.price = parseInt(price);

                var jsonText = JSON.stringify(contact, memberfilter);
                var goolen = goodobj.length;
                goodobj[goolen] = JSON.parse(jsonText);
                sessionStorage.good= JSON.stringify(goodobj, memberfilter);
               
            }

        }
    }

這是本地存儲的數據格式：

　　

****************************************************************************************************************

***購物車還有加減功能，附上最基本的功能：

購物車頁面是另外的，這里重新定義；

var goodobj = new Object();
var money = 0;
var memberfilter = new Array();
memberfilter[0] = "id";
memberfilter[1] = "name";
memberfilter[2] = "sum";
memberfilter[3] = "price";

1、商品數量加一：

function add(id) {//此方法是帶商品id的
    for (var i = 0; i < goodobj.length; i++) {//簡單的遍歷，沒有優化
        if (goodobj[i].id == id) {
            goodobj[i].sum = 1 + parseInt(goodobj[i].sum);
            sessionStorage.good= JSON.stringify(goodobj, memberfilter);
            money = parseInt(money) + parseInt(goodobj[i].price);//總價
            break;
        }
    }
};

2、商品數量減一：

function cut(id) {
    for (var i = 0; i < goodobj.length; i++) {
        if (goodobj[i].id == id) {
            goodobj[i].sum = parseInt(goodobj[i].sum) - 1;
            money = parseInt(money) - parseInt(goodobj[i].price);
            if (goodobj[i].sum == 0) {
                goodobj = goodobj.del(i);//刪除此商品
            }
            sessionStorage.good= JSON.stringify(goodobj, memberfilter);
            break;
        }
    }
};

3、刪除商品的時候，也就是對對象數組進行操作，那么刪除一個對象，就要刷新一次索引，不然某array[i]可能就是undefined；這個時候就會造成json錯誤；

刪除商品使用的函數使用了slice()和concat();

w3school中解釋：

slice() 方法可提取字符串的某個部分，並以新的字符串返回被提取的部分；

concat() 方法用於連接兩個或多個數組，該方法不會改變現有的數組，而僅僅會返回被連接數組的一個副本。

prototype 屬性使您有能力向對象添加屬性和方法。

如下是代碼：

Array.prototype.del = function (n) {
    if (n < 0) 
        return this;
    else
        return this.slice(0, n).concat(this.slice(n + 1, this.length));
    }//本代碼有參考網上的代碼，出處不記得了，真是不好意思

 

最后也想解釋一下為什么用這個格式的json，我用ajax技術把數據傳送到后端，定義了一個函數解析這個格式的json，中間利用一個類暫時存儲其中的信息，最終轉換為dataset，這樣數據就可以方便使用了

 

我希望看到這篇文章的伙伴們都可以留下您寶貴的意見，我希望加以改進函數！！謝謝交流

最近在開發微信，我也希望有人交流

作者：威華