使用cookie實作五星好評組件的評分資料存盤

整個專案的檔案結構：

img檔案夾中使用的圖片

commstar.png：

face-red.png:

JS代碼

export default class Star {
  elem;
  label;
  name;
  starCon;
  face;
  score;

  pos = -1;
  starList = [];

  static STAR_NUM = 5;
  static SCORELIST = {};

  // 初始化
  constructor(_label) {
    this.label = _label;

    this.elem = this.createElem();
    Object.assign(this.elem.style, {
      margin: "20px",
      float: "left",
      fontSize: "12px",
    });

    if (!Star.SCORELIST[this.label]) Star.SCORELIST[this.label] = 0;

    this.getCookie();

    this.createLabel(this.elem);
    this.createStar(this.elem);
    this.createScore(this.elem);

    this.changeStar(this.pos);
    this.changeScore(this.pos + 1);
  }

  // 創建整個組件對應的容器元素
  createElem() {
    if (this.elem) return this.elem;
    let div = document.createElement("div");
    return div;
  }
  
  // 將當前實體化物件添加到parent中
  appendTo(parent) {
    if (typeof parent === "string") parent = document.querySelector(parent);
    parent.appendChild(this.elem);
  }

  // 獲取cookie中存盤的評分資料
  getCookie() {
    if (document.cookie.length < 0) return;

    var arr = document.cookie.split(";");
    arr.forEach((item) => {
      var arr1 = item.split("=");
      if (arr1[0].trim() === "scoreList") arr = arr1[1];
    });

    try {
      var obj = JSON.parse(arr);
    } catch (e) {
      return;
    }

    for (var prop in obj) {
      if (this.label === prop) {
        this.pos = obj[prop] - 1;
        Star.SCORELIST[this.label] = obj[prop];
        return;
      }
    }
  }
  
  // 創建評價的名稱部分
  createLabel(parent) {
    this.name = document.createElement("div");
    this.name.textContent = this.label;
    Object.assign(this.name.style, {
      float: "left",
      height: "16px",
    });

    parent.appendChild(this.name);
  }

  // 創建星星部分
  createStar(parent) {
    this.starCon = document.createElement("div");
    Object.assign(this.starCon.style, {
      float: "left",
      width: 16 * Star.STAR_NUM + "px",
      height: "16px",
      margin: "0 10px",
      position: "relative",
    });

    for (var i = 0; i < Star.STAR_NUM; i++) {
      var star = document.createElement("span");
      Object.assign(star.style, {
        width: "16px",
        height: "16px",
        backgroundImage: "url(./img/commstar.png)",
        float: "left",
      });
      this.starList.push(star);

      this.starCon.appendChild(star);
    }

    this.face = document.createElement("span");
    Object.assign(this.face.style, {
      width: "16px",
      height: "16px",
      backgroundImage: "url(./img/face-red.png)",
      position: "absolute",
      left: 0,
      top: "-18px",
      display: "none",
    });
    this.starCon.appendChild(this.face);

    parent.appendChild(this.starCon);

    this.starCon.addEventListener("mouseover", (e) => this.mouseHandler(e));
    this.starCon.addEventListener("mouseleave", (e) => this.mouseHandler(e));
    this.starCon.addEventListener("click", (e) => this.mouseHandler(e));
  }

  // 創建分數部分
  createScore(parent) {
    this.score = document.createElement("span");
    this.score.textContent = "0分";
    this.score.style.float = "left";
    this.score.style.color = "#999";

    parent.appendChild(this.score);
  }

  // 滑鼠事件的回呼函式
  mouseHandler(e) {
    switch (e.type) {
      case "click":
      case "mouseover":
        var index = this.starList.indexOf(e.target);
        if (index < 0) return;

        if (e.type === "click") {
          this.pos = index;
          this.setCookie();
        } else {
          this.changeFace(index);
          this.changeScore(index + 1);
        }
        this.changeStar(index);

        break;

      case "mouseleave":
        this.changeFace(-1);
        this.changeScore(this.pos + 1);
        this.changeStar(this.pos);
    }
  }

  // 改變星星的樣式
  changeStar(n) {
    this.starList.forEach((item, index) => {
      if (index <= this.pos || index <= n) {
        item.style.backgroundPositionY = "-16px";
      } else {
        item.style.backgroundPositionY = "0";
      }
    });
  }

  // 改變表情的樣式
  changeFace(n) {
    if (n < 0) {
      return (this.face.style.display = "none");
    } else {
      var index = Star.STAR_NUM - n - 1;
      Object.assign(this.face.style, {
        display: "block",
        backgroundPositionX: -20 * index + "px",
        left: n * 16 + "px",
      });
    }
  }

  // 改變分數
  changeScore(n) {
    if (n < 0) n = 0;
    if (n > Star.STAR_NUM) n = Star.STAR_NUM;
    this.score.textContent = n + "分";
    if (n > 0) this.score.style.color = "red";
    else this.score.style.color = "#999";
  }

  // 使用cookie存盤評分資料
  setCookie() {
    Star.SCORELIST[this.label] = this.pos + 1;
    var scoreList = JSON.stringify(Star.SCORELIST);

    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth();
    if (month === 11) {
      month = 1;
      year++;
    } else {
      month++;
    }

    date.setFullYear(year);
    date.setMonth(month);

    document.cookie =
      "scoreList=" + scoreList + ";expires=" + date.toUTCString();
  }
}

html代碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>五星好評</title>
  </head>
  <body>
    <script type="module">
      import Star from "./js/Star.js";

      let list = [
        "商品符合度",
        "店家服務態度",
        "快遞配送速度",
        "快遞員服務",
        "快遞包裝",
      ];

      list.forEach((item) => {
        let star = new Star(item);
        star.appendTo("body");
      });
    </script>
  </body>
</html>

實作效果

當第一次點擊星星評分以后，重繪當前頁面或者徹底關閉瀏覽器以后再次打開頁面，上次的評分結果依舊存在，可以在控制臺的cookie中看到快取的評分資料：