如何通过 JavaScript 将我的操作存储在 cookie 中？

Question

我目前有一个复选框。我想实现下面描述的方法~

当用户点击复选框并且它变成红色背景状态时，可以使用 javascript 将此操作存储在 cookie 中。网页刷新的时候，红色背景状态还是Exist，请问怎么写才能实现？

label input {
  display: none;
}
label i {
  display: block;
  width: 10px;
  height: 10px;
  border: 1px solid;
  background: red;
}
label input:checked ~ i {
  display: block;
  background-image: url("https://img.magiclen.org/albums/webpage-icon-font/shut-003.png");
  background-size: cover;
}

<label>
  <input type="checkbox">
  <i></i>
</label>

example

Answer 1

您可以使用 Javascript 浏览器设置 cookies DOM:

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 UTC";

本例取自w3schools^^ https://www.w3schools.com/js/js_cookies.asp

从这里，您可以将 cookie 制作成 document.cookie = "background_state = 1; expires=..."

然后在您的代码中，您只需执行以下操作：

function getCookie(name) {
  const value = `; ${document.cookie}`;
  const parts = value.split(`; ${name}=`);
  if (parts.length === 2) return parts.pop().split(';').shift();
}

来源：Get cookie by name

从这里你可以按照以下方式做一些事情：（在你的代码开头）

if(getCookie(background_state) //<-- this is referring to the value (if it's 1 its true, if 0 it's false) ){DOM.edit.css.here... };

如何通过 JavaScript 将我的操作存储在 cookie 中？

How to store my actions in cookies through JavaScript?

javascript

cookies