Анализ методов реализации функции корзины с использованием native js + cookie

Текст статьи

В этой статье рассказывается о методе реализации функции корзины с помощью原生 js + cookie. Предлагается для обсуждения и использования, подробности см. ниже:

Здесь используется js + cookie для реализации простой функции корзины.

Простая структура HTML, только для демонстрации функции.
  <ul>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0001</span><span>shdfi</span><span>￥98.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0002</span><span>fbvfgdb</span><span>￥698.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0003</span><span>dfdfi</span><span>￥988.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0004</span><span>sssi</span><span>￥998.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0005</span><span>yyu</span><span>￥98.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>a0006</span><span>sheri</span><span>￥598.00</span></li>
<li><span>a0007</span><span>dsfcdhdfi</span><span>￥498.00</span></li>
  <li><span>sbnm,</span><span>￥698.00</span><input type="button" value="Добавить"</li>
в корзину"></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");
      //проверить, существует ли куки, или это первое добавление
      var arr = cookieUtil.getCookie("car") ? 
JSON.parse(cookieUtil.getCookie("car")) : [];
      //пройти по каждому элементу input и добавить к ним событие click
      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;
          //пройти по куки, чтобы проверить, существует ли этот товар
          for (var i = 0; i < arr.length; i++) {
            if (arr[i].g_id == g_id) {
              //товар уже существует, количество товара +1
              arr[i].num++;
              break;//срочно завершить итерацию
            }
          }
          //Если значение i равно длине arr, то это означает, что итерация завершена, и в условиях if не было выполнено ни одного условия
          //в куки не существует этого товара, создать новый объект товара и добавить его в массив
          if (i == arr.length) {
            var goods = {
              "g_id" : g_id,
              "g_name" : g_name,
              "g_price" : g_price,
              num : 1
            }
            arr.push(goods);
          }
          //сериализовать обновленный массив в строку JSON и сохранить в куки
          var date = new Date();
          date.setDate(date.getDate() + 10); //сохранить на десять дней
  //сохранить куки
  cookieUtil.setCookie("car", JSON.stringify(arr), date); 
        }
      }
    }
</script>

Здесь封装的对象 cookieUtil

//cookie Util
var cookieUtil = {
  //добавить куки
  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;
  },
  //Получение 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.

Заявление: содержание этой статьи взято из Интернета, авторские права принадлежат соответствующему автору, контент предоставлен пользователями Интернета, сайт не имеет права собственности, не был обработан вручную, не несет ответственности за соответствующие юридические последствия. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для сообщения о нарушении,并提供 соответствующие доказательства. При подтверждении факта нарушения сайт немедленно удаляет涉嫌侵权的内容.