Relevant DOM op...LOGIN

Relevant DOM operations for developing shopping carts with JavaScript (3)

This section mainly encapsulates various operations in the shopping cart, such as counting the number of products, updating and obtaining local data, etc., to facilitate code management.

First, check whether the local data contains the specified object (commodity) based on the id

Secondly, update the local data through the array object and obtain the total quantity of the commodity

Finally , update the local data according to the product identification, and then obtain the local data.

<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>

Comments:

JSON.stringify

Converts a JavaScript value to a JavaScript Object Notation (Json) string.

Syntax: JSON.stringify(value [, replacer] [, space])

value: is a required field. It is the object you input, such as array, class, etc. replacer: This is optional. It is divided into 2 methods, one is an array, and the second is a method.

Case 1: When replacer is an array, we can know through subsequent experiments that it is related to the first parameter value. Generally speaking, the serialized results are represented by key-value pairs. Therefore, if the value of the second parameter exists in the first one at this time, then the value of the second parameter will be used as the key, and the value of the first parameter will be represented as value. If it does not exist, it will be ignored.

Situation 2: When replacer is a method, it is very simple, that is, each serialized object (remember, each one) is passed into the method for processing.

space: What is used as the separator.

 1) If omitted, the displayed value will have no separator and will be output directly.
 2) If it is a number, then it defines how many characters to indent. Of course, if it is greater than 10, the default is 10, because the maximum value is 10.
 3) If it is some escape characters, such as "\t", indicating a carriage return, then it will have one carriage return per line.
 4) If it is just a string, append these strings to each line when outputting the value. Of course, the maximum length is also 10 characters.


#Create a server.js file and put the above JavaScript code into it.

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

Later called from the HTML page to achieve the function module effect.

Next Section
<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>
submitReset Code
ChapterCourseware