JavaScript开发购物车之相关DOM操作（三）

本节主要对购物车中各种操作进行了封装，比如商品个数统计，更新获取本地数据等操作，方便代码管理。

首先，根据id查看查看本地数据中是否含有指定的对象（商品）

其次，通过数组对象更新本地数据，获取商品的总数量

最后，根据商品标识更新本地数据，再获取本地数据。

<script>
 /*
 功能：查看本地数据中是否含有指定的对象（商品），根据id
 参数：id：商品的标识
 */
function checkObjByPid(id) {
    var jsonStr = cookieObj.get("datas");
    var jsonObj = JSON.parse(jsonStr);
    //parse() 方法可解析一个日期时间字符串，并返回 1970/1/1 午夜距离该日期时间的毫秒数。
    var isExist = false;
    for(var i = 0, len = jsonObj.length; i < len; i++) {
        if(jsonObj[i].pid == id) {
            isExist = true;
            break;
        }
    }
    return isExist; //return false;
}

/*
 功能：更新本地数据
 参数：arr    数组对象
 返回一个值：最新的本地转换后的数组对象
 * */
function updateData(arr) {
    var jsonStr = JSON.stringify(arr);
    cookieObj.set({
        name: "datas",
        value: jsonStr
    });
    jsonStr = cookieObj.get("datas");
    return JSON.parse(jsonStr);
}

/*
 获取商品的总数量
 返回：数字
 */
function getTotalCount() {
    /*循环遍历数组，获取每一个对象中的pCount值相加总和*/
    var totalCount = 0; //默认为0
    var jsonStr = cookieObj.get("datas");
    var listObj = JSON.parse(jsonStr);
    for(var i = 0, len = listObj.length; i < len; i++) {
        totalCount = listObj[i].pCount + totalCount;
    }
    return totalCount;
}

/*
 更新本地数据根据pid
 id:商品的标识
 */
function updateObjById(id, num) {
    var jsonStr = cookieObj.get("datas");
    var listObj = JSON.parse(jsonStr);
    for(var i = 0, len = listObj.length; i < len; i++) {
        if(listObj[i].pid == id) {
            listObj[i].pCount = listObj[i].pCount + num;
            break;
        }
    }
    return updateData(listObj)
}

/*
 获取本地数据
 返回 数组对象
 * */
function getAllData() {
    var jsonStr = cookieObj.get("datas");
    var listObj = JSON.parse(jsonStr);
    return listObj;
}

function deleteObjByPid(id) {
    var lisObj = getAllData();
    for(var i = 0, len = lisObj.length; i < len; i++) {
        if(lisObj[i].pid == id) {
            lisObj.splice(i, 1); //splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
            break;
        }
    }
    updateData(lisObj);
    return lisObj;
}
</script>

注释：

JSON.stringify

将 JavaScript 值转换为 JavaScript 对象表示法 (Json) 字符串。

语法：JSON.stringify(value [, replacer] [, space]) 

value：是必选字段。就是你输入的对象，比如数组，类等。 replacer：这个是可选的。它又分为2种方式，一种是数组，第二种是方法。 

　　情况一：replacer为数组时，通过后面的实验可以知道，它是和第一个参数value有关系的。一般来说，系列化后的结果是通过键值对来进行表示的。 所以，如果此时第二个参数的值在第一个存在，那么就以第二个参数的值做key，第一个参数的值为value进行表示，如果不存在，就忽略。

　　情况二：replacer为方法时，那很简单，就是说把系列化后的每一个对象（记住是每一个）传进方法里面进行处理。 

space：就是用什么来做分隔符的。 

　　1）如果省略的话，那么显示出来的值就没有分隔符，直接输出来 。
　　2）如果是一个数字的话，那么它就定义缩进几个字符，当然如果大于10 ，则默认为10，因为最大值为10。
　　3）如果是一些转义字符，比如“\t”，表示回车，那么它每行一个回车。 
　　4）如果仅仅是字符串，就在每行输出值的时候把这些字符串附加上去。当然，最大长度也是10个字符。 

创建一个server.js文件把上面的JavaScript代码放入其中。

<script type="text/javascript" src="server.js"></script>

以后从HTML页面调用，实现功能模块效果。