通过cookie缓存原生js五星好评数据

1. cookie作用：

	我们不能主动打开文件 和像本地存储数据，但是当浏览器彻底关闭时，普通设置的cookie会丢失，自动清除。所以我们需要cookie来暂存数据，但是cookie的大小只有5k，也就是5000英文。
	Cookie是根据目录路径存储的，不是根据文件存储，不同的路径可以存储不同的cookie， 子目录可以访问当前路径下和父级所有目录下的cookie数据，包括根目录的。而根目录只能访问自己的存储数据。
	要注意的是cookie的安全性不高，因为cookie是暴露的。

2.实现效果：

通过原生js实现鼠标滑过星星变为红色，显示对应的分数，并且星星上显示对应的笑脸精灵图

当我们关掉浏览器重新进入的时候，是不能让数据丢失的，因此我们要存进cookie里边。当我们下次打开浏览器的时候，数据就不会丢失了。

3. 代码模块：

1.component.js

export default class Component extends EventTarget {
    elem;
    constructor() {
        super();
        this.elem = this.createElem();
    }
    createElem() {
        if (this.elem) return this.elem;
        let div = document.createElement("div");
        return div;
    }
    appendTo(parent) {
        if (typeof parent === "string") parent = document.querySelector(parent);
        parent.appendChild(this.elem);
    }
}

2.Star.js
1）JS生成页面结构：

constructor(_label) {
		super();
		Object.assign(this.elem.style, {
			height: "32px",
			margin: "16px 3px 0 10px",
		});
		this.createLabel(_label);
		this.createStarCon();
		this.createScore();
	}

2）生成label：DOM创建div存放label ，并且设置样式。最后把div放进elem里边

createLabel(labels) {
		this.label = document.createElement("div");
		this.label.textContent = labels;
		Object.assign(this.label.style, {
			height: "16px",
			float: "left",
			fontSize: "12px",
			color: "#ccc",
			userSelect: "none",
		});
		this.elem.appendChild(this.label);
	}

3）生成星星：每个星星都是一个div 最后五个星星放进一个div ，给这个div添加事件。

createStarCon() {
		this.starCon = document.createElement("div");
		Object.assign(this.starCon.style, {
			height: "16px",
			paddingLeft: "5px",
			position: "relative",
			float: "left",
		});
		var df = document.createDocumentFragment();
		for (var i = 0; i < Star.STAR_SUM; i++) {
			var star = document.createElement("div");
			Object.assign(star.style, {
				width: "16px",
				height: "16px",
				float: "left",
				backgroundImage: "url(./img/commstar.png)",
			});
			this.starArr.push(star);
			df.appendChild(star);
		}
		this.creatFace();
		this.starCon.appendChild(df);
		this.elem.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));
	

4）生成分数：

createScore() {
		this.score = document.createElement("div");
		Object.assign(this.score.style, {
			height: "16px",
			float: "left",
			fontSize: "12px",
			paddingLeft: "5px",
			color: "#333",
		});
		this.score.textContent = "0分";
		this.elem.appendChild(this.score);
	}

5） 生成笑脸：

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

6)最后添加交互功能：

mouseHandler(e) {
if (e.type === "mouseover") {
	var index = this.starArr.indexOf(e.target);
	this.face.style.display = "block";
	this.changeFace(index);
	this.changeScore(index + 1);
	this.changeStar(index + 1);
 } else if (e.type === "mouseleave") {
	this.face.style.display = "none";
	this.changeFace(-1);
	this.changeStar(this.pos);
	this.changeScore(this.pos);
 } else {
	var index = this.starArr.indexOf(e.target);
	this.pos = index + 1;
	this.changeStar(this.pos);
	this.changeScore(this.pos);
	this.setCookie();
  }
}

尤其要注意的是当鼠标点击时候,我们要进行记录分数和设置cookie

var index = this.starArr.indexOf(e.target);
		this.pos = index + 1;
		this.changeStar(this.pos);
		this.changeScore(this.pos);
		this.setCookie();

7）
最后是实现改变分数、改变笑脸、改变星星、设置和获取cookie的值的功能

改变分数：

changeScore(n) {
		this.score.textContent = n + "分";
		if (n === 0) {
			this.score.style.color = "#333";
		} else {
			this.score.style.color = "red";
		}
	}

改变笑脸：

changeFace(n) {
		if (n < 0) {
			this.face.style.display = "none";
			return;
		}
		Object.assign(this.face.style, {
			backgroundPositionX: -(Star.STAR_SUM - 1 - n) * 20 + "px",
			left: this.starArr[n].offsetLeft + "px",
		});
	}

改变星星：

changeStar(n) {
		if (n < 0) return;
		for (var i = 0; i < Star.STAR_SUM; i++) {
			if ((i < n) | (i < this.pos)) {
				this.starArr[i].style.backgroundPositionY = "-16px";
			} else {
				this.starArr[i].style.backgroundPositionY = "0px";
			}
		}
	}

设置获取cookie的值：

setCookie() {
		let date = new Date();
		date.setMonth(11);
		var str =
			this.label.textContent +
			"=" +
			this.pos +
			";expires=" +
			date.toUTCString();
		document.cookie = str;
	}
	getCookie() {
		if (!document.cookie) return -1;
		console.log(typeof document.cookie);
		var obj = document.cookie.split(";").reduce((value, item) => {
			var arr = item.split("=");
			value[arr[0].trim()] = arr[1];
			return value;
		}, {});
		return obj;
	}

4.star.html

<script type="module">
			import Star from "./js/Star.js";
			var list1 = [
				"商品符合度",
				"店家服务态度",
				"快递配送速度",
				"快递员服务",
				"快递包装",
			];
			for (var i = 0; i < list1.length; i++) {
				var star = new Star(list1[i]);
				if (star.getCookie() !== -1) {
					var obj = star.getCookie();
					var pos = obj[list1[i]];
					star.pos = pos;
					star.changeStar(pos);
					star.changeScore(pos);
				}
				star.appendTo("body");
			}
		</script>