原生js+cookieを使用してカート機能を実現する方法の分析

この記事では、原生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（メールを送信する際には、#を@に置き換えてください。報告を行い、関連する証拠を提供してください。一旦確認が取れましたら、本サイトは即座に侵害を疑われる内容を削除します。）

基本教程