Opérations DOM pertinentes pour développer des paniers d'achat avec JavaScript (3)

Cette section regroupe principalement diverses opérations dans le panier, comme le comptage du nombre de produits, la mise à jour et l'obtention de données locales, etc., pour faciliter la gestion du code.

Tout d'abord, vérifiez si les données locales contiennent l'objet spécifié (marchandise) en fonction de l'ID

Deuxièmement, mettez à jour les données locales via l'objet tableau et obtenez la quantité totale du produit

Enfin, mettez à jour les données locales en fonction de l'identification du produit, puis obtenez les données locales.

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

Annotation :

JSON.stringify

Convertit une valeur JavaScript en chaîne de notation d'objet JavaScript (Json).

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

value : est un champ obligatoire. Il s'agit de l'objet que vous saisissez, tel qu'un tableau, une classe, etc. remplaçant : Ceci est facultatif. Il est divisé en 2 méthodes, l’une est un tableau et la seconde est une méthode.

Cas 1 : Lorsque le remplaçant est un tableau, nous pouvons savoir grâce à des expériences ultérieures qu'il est lié à la première valeur du paramètre. De manière générale, les résultats sérialisés sont représentés par des paires clé-valeur. Par conséquent, si la valeur du deuxième paramètre existe dans le premier à ce moment-là, alors la valeur du deuxième paramètre sera utilisée comme clé et la valeur du premier paramètre sera représentée comme valeur si elle n'existe pas. , il sera ignoré.

Cas 2 : Lorsque le remplaçant est une méthode, c'est très simple, c'est-à-dire passer chaque objet sérialisé (souvenez-vous de chacun) dans la méthode pour le traitement.

espace : Ce qui est utilisé comme séparateur.

　1) En cas d'omission, la valeur affichée n'aura pas de séparateur et sera sortie directement.
2) S'il s'agit d'un nombre, alors il définit le nombre de caractères à mettre en retrait. Bien sûr, s'il est supérieur à 10, la valeur par défaut est 10, car la valeur maximale est 10.
3) S'il s'agit d'un caractère d'échappement, tel que "t", qui signifie retour chariot, alors il y aura un retour chariot par ligne.
　4) S'il ne s'agit que d'une chaîne, ajoutez ces chaînes à chaque ligne lors de la sortie de la valeur. Bien entendu, la longueur maximale est également de 10 caractères.

Créez un fichier server.js et insérez-y le code JavaScript ci-dessus.

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

sera appelé ultérieurement depuis la page HTML pour obtenir l'effet de module de fonction.