JS cookie的设置、读取和删除

概要

“cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。” - w3school

从JavaScript的角度看，cookie 就是一些字符串信息。这些信息存放在客户端的计算机中，用于客户端计算机与服务器之间传递信息。在JavaScript中可以通过 document.cookie 来读取或设置这些信息。由于cookie 多用在客户端和服务端之间进行通信，所以除了JavaScript以外，服务端的语言也可以存取cookie。

一、设置cookie

在JavaScript 中，可以通过document.cookie属性来创建、读取、修改和删除 cookie信息

设置一个cookie 信息，[document.cookie=“name=value”]
需要以name=value形式的字符串来定义
需要注意，一次只能设置一个名/值对

document.cookie = "name=张三";

cookie 存储时值不能是用分号（;）、逗号（,）、等号（=）以及空格，因为这些特殊符号是cookie的标识符,用于标识和设置cookie的存储格式，所以：

在储到cookie 时，可以使用 js内置的 encodeURIComponent() 函数对数据进行编码
在读取cookie 时，可以使用 js内置的 decodeURIComponent() 函数对数据进行解码

document.cookie = "url=https://www.baidu.com/;?id=123";
//https://www.baidu.com/  实际存储

document.cookie = "url=" + encodeURIComponent("https://www.baidu.com/;?id=123");

1.给cookie设置过期时间
默认情况下，cookie是会话级别的，也就是说，它们将在用户关闭浏览器时删除。但是在实际开发中，cookie常常需要长期保存，可以通过设置cookie的过期时间来使其在一定时间内保持有效。以下是一个将cookie的过期时间设置为一天的示例：

const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 1);
document.cookie = `username=John; expires=${