demo-购物车（localstorage）

需要的文件

cart.js

class Cart {
  constructor() {
    this.cartData = localStorage.getItem("cartData")
      ? JSON.parse(localStorage.getItem("cartData"))
      : {};
  }
  saveData(id, num, terminal) {
    if (!this.cartData[id] || terminal) {
      this.cartData[id] = num;
    } else {
      this.cartData[id] += num;
    }

    localStorage.setItem("cartData", JSON.stringify(this.cartData));
  }
  showList(domobj) {
    this.domobj = domobj;
    let prodDatas = JSON.parse(localStorage.getItem("prodDatas"));
    let cartData = JSON.parse(localStorage.getItem("cartData"));

    let str = "";
    for (let id in cartData) {
      str += `
      <li data-id="${id}">
      <input type="checkbox" class="ck" />
      <img src="${prodDatas[id].imgsrc}" />
      <span>${prodDatas[id].title}</span>
      <span class="price">${prodDatas[id].price}</span>
      <span class="minus">-</span>
      <input type="text" class="num" value="${cartData[id]}" />
      <span class="plus">+</span>
      <span class="perPrices">${prodDatas[id].price * cartData[id]}</span>
      <span class="del">删除</span>
    </li>
      `;
    }
    domobj.innerHTML = str;
  }
  checkAll(id) {
    let oCheckAll = document.getElementById(id);
    let aCks = document.querySelectorAll(".ck");
    oCheckAll.onclick = () => {
      for (let i = 0; i < aCks.length; i++) {
        aCks[i].checked = oCheckAll.checked;
      }
      this.getTotalPrice("totalPrice");
    };
    for (let i = 0; i < aCks.length; i++) {
      aCks[i].onclick = () => {
        var count = 0;
        for (let j = 0; j < aCks.length; j++) {
          if (aCks[j].checked) {
            count++;
          }
        }
        if (count == aCks.length) {
          oCheckAll.checked = true;
        } else {
          oCheckAll.checked = false;
        }
        this.getTotalPrice("totalPrice");
      };
    }
  }
  updateData() {
    let _this = this;
    this.aMinus = document.querySelectorAll(".minus");
    this.aPlus = document.querySelectorAll(".plus");
    this.aNums = document.querySelectorAll(".num");
    this.aPrice = document.querySelectorAll(".price");
    this.aPerPrice = document.querySelectorAll(".perPrices");
    this.aCks = document.querySelectorAll(".ck");

    for (let i = 0; i < this.aMinus.length; i++) {
      //减
      this.aMinus[i].onclick = () => {
        let id = this.aMinus[i].parentNode.getAttribute("data-id");
        //console.log(id);
        if (this.aNums[i].value <= 1) {
          this.aNums[i].value = 1;
          return;
        }
        this.aNums[i].value--;

        this.saveData(id, Number(this.aNums[i].value), true);
        getPerPrice(i);
        this.getTotalPrice("totalPrice");
      };
      //加
      this.aPlus[i].onclick = () => {
        let id = this.aPlus[i].parentNode.getAttribute("data-id");
        this.aNums[i].value++;
        this.saveData(id, Number(this.aNums[i].value), true);
        getPerPrice(i);
        this.getTotalPrice("totalPrice");
      };
      //改
      this.aNums[i].onchange = () => {
        let id = this.aNums[i].parentNode.getAttribute("data-id");
        if (this.aNums[i].value <= 1) {
          this.aNums[i].value = 1;
        }
        this.saveData(id, Number(this.aNums[i].value), true);
        getPerPrice(i);
        this.getTotalPrice("totalPrice");
      };
    }

    function getPerPrice(i) {
      _this.aPerPrice[i].innerText =
        _this.aNums[i].value * _this.aPrice[i].innerText;
    }
  }
  getTotalPrice(id) {
    let oTotalPrice = document.getElementById(id);
    let totalPrice = 0;
    for (let j = 0; j < this.aCks.length; j++) {
      if (this.aCks[j].checked) {
        totalPrice += Number(this.aPerPrice[j].innerText);
      }
    }
    oTotalPrice.innerText = totalPrice;
  }
  removeData() {
    let aDelbtns = document.querySelectorAll(".del");
    for (let i = 0; i < aDelbtns.length; i++) {
      aDelbtns[i].onclick = () => {
        let id = aDelbtns[i].parentNode.getAttribute("data-id");
        this.domobj.removeChild(aDelbtns[i].parentNode);
        delete this.cartData[id];
        localStorage.setItem("cartData", JSON.stringify(this.cartData));
        this.aCks[i].checked = false;
        this.getTotalPrice("totalPrice");
      };
    }
  }
}

prodList.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>列表页</title>
    <style>
      ul,
      li,
      p {
        padding: 0;
        margin: 0;
      }
      img {
        display: block;
        border: none;
      }
      #prodList li {
        list-style: none;
        float: left;
        margin: 10px;
        width: 220px;
        padding: 10px;
        border: 1px solid #cecece;
      }
      #prodList li p {
        margin: 10px 0;
      }
      #prodList li input {
        border: none;
        width: 120px;
        height: 40px;
        background-color: red;
        color: white;
      }
    </style>
  </head>
  <body>
    <div>
      <ul id="prodList"></ul>
    </div>
    <script src="cart.js"></script>
    <script>
      /* let data = { a: 1, b: 2 };
      localStorage.setItem("username", "duanfanchao");
      localStorage.setItem("data", JSON.stringify(data));
      console.log(JSON.parse(localStorage.getItem("data")));
      localStorage.removeItem("username"); */

      /* let productDatas = {
        "10001": {
          id: 10001,
          title: "商品1",
          price: 100,
          imgsrc: "img/1.jpg",
        },
        "10002": {
          id: 10002,
          title: "商品2",
          price: 200,
          imgsrc: "img/2.jpg",
        },
        "10003": {
          id: 10003,
          title: "商品3",
          price: 300,
          imgsrc: "img/3.jpg",
        },
      };
      localStorage.setItem("prodDatas", JSON.stringify(productDatas)); */
      let oUl = document.getElementById("prodList");
      let prodDatas = JSON.parse(localStorage.getItem("prodDatas"));
      let str = "";
      for (let id in prodDatas) {
        str += ` <li>
         <a href="detail.html?id=${id}"> <img src="${prodDatas[id].imgsrc}" /></a>
          <p>${prodDatas[id].title}</p>
          <p>${prodDatas[id].price}</p>
          <input type="button" class="addBtn" value="加入购物车" data-id="${id}" />
        </li>`;
      }
      oUl.innerHTML = str;

      let cart = new Cart();

      let addBtns = document.querySelectorAll(".addBtn");
      for (let i = 0; i < addBtns.length; i++) {
        addBtns[i].onclick = function () {
          let id = this.getAttribute("data-id");
          cart.saveData(id, 1, false);
        };
      }
    </script>
  </body>
</html>

detail.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>详情页</title>
  </head>
  <body>
    <div id="detail"></div>
    <script src="cart.js"></script>
    <script>
      let prodDatas = JSON.parse(localStorage.getItem("prodDatas"));
      let id = location.search.split("=")[1];
      let product = prodDatas[id]; //单个商品数据
      let oDetail = document.getElementById("detail");

      oDetail.innerHTML = `<img src="${product.imgsrc}"><p>${product.title}</p><p>${product.price}</p><p><span class="minus">-</span><input type="text" class="txt" value="1"><span class="plus">+</span></p><p><input type="button" class="addBtn" value="加入购物车"></p>`;

      let oMinus = document.querySelectorAll(".minus")[0];
      let oPlus = document.querySelectorAll(".plus")[0];
      let oTxt = document.querySelectorAll(".txt")[0];
      let oBtn = document.querySelectorAll(".addBtn")[0];

      oMinus.onclick = function () {
        if (oTxt.value <= 1) {
          oTxt.value = 1;
          return;
        }
        oTxt.value--;
      };
      oPlus.onclick = function () {
        oTxt.value++;
      };

      let cart = new Cart();
      oBtn.onclick = function () {
        cart.saveData(id, Number(oTxt.value), false);
        location.href = "cart.html";
      };
    </script>
  </body>
</html>

cart.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>购物车</title>
    <style>
      img {
        width: 30px;
      }
    </style>
  </head>
  <body>
    <div>
      <input type="checkbox" id="checkAll" />
      <ul id="cartList">
        <li>
          <input type="checkbox" class="ck" />
          <img src="" />
          <span>标题</span>
          <span class="price"></span>
          <span class="minus">-</span>
          <input type="text" class="num" />
          <span class="plus">+</span>
          <span class="perPrices"></span>
          <span class="del">删除</span>
        </li>
      </ul>
      <div id="totalPrice">0</div>
    </div>
    <script src="cart.js"></script>
    <script>
      let cart = new Cart();
      let oUl = document.getElementById("cartList");
      cart.showList(oUl);
      cart.checkAll("checkAll");
      cart.updateData();
      cart.removeData();
    </script>
  </body>
</html>