English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
L'exemple de cet article décrit le js natif+Méthode pour réaliser la fonctionnalité de panier d'achat avec cookie. Partageons-le avec tous pour la référence, voici les détails :
Ici, on utilise js+Cookie pour réaliser une fonctionnalité simple de panier d'achat.
Tout d'abord, c'est une structure HTML simple, juste pour démontrer la fonctionnalité.
<ul> <li><span>a0001</span><span>shdfi</span><span>￥98.00</span> <input type="button" value="Ajouter au panier"></li> <li><span>a0002</span><span>fbvfgdb</span><span>￥698.00</span> <input type="button" value="Ajouter au panier"></li> <li><span>a0003</span><span>dfdfi</span><span>￥988.00</span> <input type="button" value="Ajouter au panier"></li> <li><span>a0004</span><span>sssi</span><span>￥998.00</span> <input type="button" value="Ajouter au panier"></li> <li><span>a0005</span><span>yyu</span><span>￥98.00</span> <input type="button" value="Ajouter au panier"></li> <li><span>a0006</span><span>sheri</span><span>￥598.00</span> <input type="button" value="Ajouter au panier"></li> <li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span> <input type="button" value="Ajouter au panier"></li> <li><span>sbnm,</span><span>￥698.00</span><input type="button" value="Ajouter Ajouter au panier"></li> </ul> <a href="panier_voir_page.html" rel="external nofollow" >Voir le panier</a>
Le code suivant ajoute les informations du produit au cookie lors du clic sur le bouton d'ajout, les commentaires sont assez détaillés. Dans le code, j'ai encapsulé les opérations sur le cookie (set et get) dans les méthodes de l'objet cookieUtil pour faciliter l'appel.
<script>
//JSON.parse
//JSON.stringify
onload = function () {
var input = document.getElementsByTagName("input");
//Vérifier si le cookie existe ou s'il s'agit de la première ajout
var arr = cookieUtil.getCookie("car") ?
JSON.parse(cookieUtil.getCookie("car")) : [];
//Parcourir pour ajouter un événement de clic à chaque élément input
for (var j = 0; j < input.length; j++) {
input[j].onclick = function () {
var g_id = this.parentNode.children[0].innerHTML;
var g_name = this.parentNode.children[1].innerHTML;
var g_price = this.parentNode.children[2].innerHTML;
//Parcourir le cookie pour vérifier si le produit existe déjà
for (var i = 0; i < arr.length; i++) {
if (arr[i].g_id == g_id) {
//Le produit existe déjà, quantité du produit+1
arr[i].num++;
break;//Arrêter immédiatement la boucle
}
}
//Si la valeur de i est égale à la longueur de l'array, cela signifie que la boucle a été terminée sans entrer dans la condition if
//Le produit n'existe pas dans le cookie, créer un nouvel objet produit et l'ajouter à l'array
if (i == arr.length) {
var goods = {
"g_id" : g_id,
"g_name" : g_name,
"g_price" : g_price,
num : 1
}
arr.push(goods);
}
//Sérialiser l'array mis à jour en chaîne JSON et l'enregistrer dans le cookie
var date = new Date();
date.setDate(date.getDate()); + 10); //pendant dix jours
//enregistrer le cookie
cookieUtil.setCookie("car", JSON.stringify(arr), date);
}
}
}
</script>
Ceci est l'objet cookieUtil encapsulé ici
//cookie Util
var cookieUtil = {
//Ajouter le cookie
setCookie: function (name, value, expires) {
var cookieText = encodeURIComponent(name); + "=" +
encodeURIComponent(value);
if (expires && expires instanceof Date) {
cookieText += "; expires=" + expires;
}
// if (domain) {
// cookieText += "; domain=" + domain;
// }
document.cookie = cookieText;
},
//Obtenir le cookie
getCookie: function (name) {
var cookieText = decodeURIComponent(document.cookie);
var cookieArr = cookieText.split("; ");
for (var i = 0; i < cookieArr.length; i++) {
var arr = cookieArr[i].split("=");
if (arr[0] == name) {
return arr[1];
}
}
return null;
},
//Supprimer le cookie
unsetCookie: function (name) {
document.cookie = encodeURIComponent(name); + "=; expires=" +
new Date(0);
}
};
Les codes ci-dessus sont très faciles à comprendre, et cette page est dédiée à extraire les informations de produits du cookie.
!DOCTYPE html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>查看购物车页面</title>
<script src="../Utils.js"></script>
<script>
onload = function () {
var ul = document.getElementsByTagName("ul")[0];
var arr = cookieUtil.getCookie("car");
if (arr) {
arr = JSON.parse(arr);
//Si le cookie existe, il est extrait et affiché sur la page
for (var i = 0; i < arr.length; i++) {
//Chaque élément de l'array correspond à un objet de produit
var goods = arr[i];
var li = document.createElement("li");
li.innerHTML = "Nom du produit :" + goods.g_name + ，nombre d'articles :
quantité" + goods.num + ，prix unitaire : + goods.g_price;
ul.appendChild(li);
}
} else {
alert("Il n'y a pas encore d'articles dans le panier !");
}
}
</script>
</head>
<body>
<ul></ul>
</body>
</html>
Les lecteurs intéressés par des contenus liés à JavaScript peuvent consulter les sujets spéciaux de ce site : "Résumé des structures de données et des techniques d'algorithmes JavaScript", "Résumé des techniques de parcours et d'algorithmes JavaScript", "Résumé des techniques de recherche JavaScript", "Résumé des effets d'animation et des techniques JavaScript", "Résumé des techniques d'erreur et de débogage JavaScript" et "Résumé des utilisations des opérations mathématiques JavaScript"
J'espère que cet article vous sera utile pour la conception de programmes JavaScript.
Déclaration : Le contenu de cet article est issu du réseau, propriété de ses auteurs respectifs. Le contenu est apporté par les utilisateurs d'Internet et téléchargé spontanément. Ce site ne détient pas de droits de propriété, n'a pas été édité par l'homme et n'assume aucune responsabilité juridique. Si vous trouvez du contenu suspect de droit d'auteur, veuillez envoyer un e-mail à : notice#w3Pour signaler une violation, veuillez envoyer un e-mail à codebox.com (remplacez # par @) et fournir des preuves pertinentes. Une fois confirmée, le contenu suspect sera supprimé immédiatement.