整个项目的文件结构：

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中看到缓存的评分数据：