English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
この記事では、原生jsの+cookieを使用してカート機能を実現する方法を紹介します。皆さんに参考にしていただければ幸いです。以下の通りです:
ここではjsを使用しています+cookieを使用してシンプルなカート機能を実現します。
まずはシンプルなHTML構造を示します。機能のデモンストレーション用です。
<ul> <li><span>a0001</span><span>shdfi</span><span>¥98.00</span> <input type="button" value="カートに入れる"></li> <li><span>a0002</span><span>fbvfgdb</span><span>¥698.00</span> <input type="button" value="カートに入れる"></li> <li><span>a0003</span><span>dfdfi</span><span>¥988.00</span> <input type="button" value="カートに入れる"></li> <li><span>a0004</span><span>sssi</span><span>¥998.00</span> <input type="button" value="カートに入れる"></li> <li><span>a0005</span><span>yyu</span><span>¥98.00</span> <input type="button" value="カートに入れる"></li> <li><span>a0006</span><span>sheri</span><span>¥598.00</span> <input type="button" value="カートに入れる"></li> <li><span>a0007</span><span>dsfcdhdfi</span><span>¥498.00</span> <input type="button" value="カートに入れる"></li> <li><span>sbnm,</span>/span><span>¥698.00</span><input type="button" value="加 カートに入れる></li> </ul> <a href="购物车查看页面.html" rel="external nofollow" >カートを見る</a>
以下のコードは、クリックして追加ボタンを押したときに商品情報をcookieに追加するために作成されています。コメントは詳細です。コードでは、cookieの操作(setとget)をcookieUtilオブジェクトのメソッドとして封装して、呼び出しを簡単にします。
<script> //JSON.parse //JSON.stringify onload = function () { var input = document.getElementsByTagName("input"); //cookieが存在するか、初めて追加するかを判断します var arr = cookieUtil.getCookie("car") ? JSON.parse(cookieUtil.getCookie("car")) : []; //各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; //cookieをスキャンし、既に存在する商品があるかどうかを判断します for (var i = 0; i < arr.length; i++) { if (arr[i].g_id == g_id) { //既に存在する商品です。商品の数量+1 arr[i].num++; break;//即座にスキャンを終了します } } //iの値がarrの長さと同じであれば、スキャンが終了し、if条件文に到達していないことを示します //cookieに存在しない商品です。新しい商品オブジェクトを作成し、配列に追加します if (i == arr.length) { var goods = { "g_id" : g_id, "g_name" : g_name, "g_price" : g_price, num : 1 } arr.push(goods); } //更新された配列をJSON文字列にシリアライズし、cookieに保存します var date = new Date(); date.setDate(date.getDate()); + 10); //10日間保存します //cookieを保存します cookieUtil.setCookie("car", JSON.stringify(arr), date); } } } </script>
これは包装されたcookieUtilオブジェクトです。
//cookie Util var cookieUtil = { //cookieを追加 setCookie: function (name, value, expires) { var cookieText = encodeURIComponent(name); + "=" + encodeURIComponent(value); if (expires && expires instanceof Date) { cookieText += "; 有効期限=" + 有効期限; } // if (domain) { // cookieText += "; ドメイン=" + ドメイン; // } document.cookie = cookieText; }, //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; }, //cookieを削除 unsetCookie: function (name) { document.cookie = encodeURIComponent(name); + "=; expires=" + new Date(0); } };
上記のコードは非常に理解しやすいですが、以下のページは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); //存在するcookieを取得してページに表示します for (var i = 0; i < arr.length; i++) { //各配列要素は商品オブジェクトに対応しています var goods = arr[i]; var li = document.createElement("li"); li.innerHTML = "商品名:" + goods.g_name + 「、商品数" 量" + goods.num + 「、商品の単価:" + goods.g_price; ul.appendChild(li); } } else { alert("カートには商品がまだ存在しません!"); } } </script> </head> <body> <ul></ul> </body> </html>
JavaScriptに関するさらに詳しい内容に興味を持つ読者は、本サイトの特集を参照してください:《JavaScriptデータ構造とアルゴリズムの技術的概要》、《JavaScriptの遍歴アルゴリズムと技術的概要》、《JavaScriptの検索アルゴリズムの技術的概要》、《JavaScriptのアニメーションと技術的概要》、《JavaScriptのエラーとデバッグの技術的概要》および《JavaScriptの数学演算の技術的概要》
本文で述べたことが皆様のJavaScriptプログラムデザインに役立つことを願っています。
声明:本文の内容はインターネットから取得しており、著作権者に帰属します。インターネットユーザーが自発的に貢献し、自己でアップロードしたものであり、本サイトは所有権を持ちません。また、人工的に編集されておらず、関連する法的責任も負いません。著作権侵害を疑う内容があれば、メールで notice#w までお知らせください。3codebox.com(メールを送信する際には、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは即座に侵害を疑われる内容を削除します。)