JavaScript로 장바구니 개발을 위한 관련 DOM 작업 (3)

이 섹션에서는 코드 관리를 용이하게 하기 위해 제품 수 계산, 로컬 데이터 업데이트 및 가져오기 등 장바구니에서의 다양한 작업을 주로 요약합니다.

먼저 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 Object Notation(Json) 문자열로 변환합니다.

구문: ​​JSON.stringify(value [, replacement] [, space])

value: 필수 필드입니다. 배열, 클래스 등 사용자가 입력하는 객체입니다. 교체자: 이는 선택 사항입니다. 2가지 방식으로 나누어지는데, 하나는 배열이고, 두 번째는 방식입니다.

　 사례 1: replacement가 배열인 경우 다음 실험을 통해 첫 번째 매개변수 값과 관련이 있음을 알 수 있습니다. 일반적으로 직렬화된 결과는 키-값 쌍으로 표시됩니다. 따라서 이때 첫 번째 매개변수에 두 번째 매개변수의 값이 존재하면 두 번째 매개변수의 값이 키로 사용되고, 존재하지 않으면 첫 번째 매개변수의 값이 값으로 표시됩니다. , 무시됩니다.

　 시나리오 2: replacement가 메서드인 경우 매우 간단합니다. 즉, 직렬화된 각 객체(각각 기억)를 처리할 메서드에 전달하는 것입니다.

space: 구분자로 사용되는 것.

　1) 생략할 경우 표시값에 구분 기호가 없어 바로 출력됩니다.
　2) 숫자인 경우 들여쓰기할 문자 수를 정의합니다. 물론 10보다 큰 경우 최대값은 10이므로 기본값은 10입니다.
　3) 캐리지 리턴을 의미하는 "t"와 같은 이스케이프 문자인 경우 한 줄에 캐리지 리턴이 하나씩 있습니다.
　4) 단순한 문자열인 경우 값을 출력할 때 각 줄에 이 문자열을 추가합니다. 물론 최대 길이도 10자입니다.

server.js 파일을 만들고 위의 JavaScript 코드를 입력하세요.

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

는 함수 모듈 효과를 얻기 위해 향후 HTML 페이지에서 호출됩니다.