文章目录
- 概要
- 一、设置cookie
- 二、读取cookie
- 三、删除cookie
- 四、 封装构造通用的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=${expirationDate.toUTCString()}`;
2.指定可访问cookie的路径
在设置Cookie时，可以使用path参数来指定可访问该cookie的路径。path参数用于限制cookie在哪个路径下有效。只有与指定路径匹配的URL才能访问该Cookie。
以下是设置Cookie时指定路径的示例：
document.cookie = "username=John; path=/example";
在上面的示例中，将"username"的cookie设置为只能在以/example开头的URL路径下访问。比如，只有/example、/example/page1、/example/page2等路径下的页面才能读取这个cookie。
默认情况下，如果不指定path参数，cookie的默认路径是设置cookie的页面所在的路径。例如，如果在http://example.com/login页面设置了一个Cookie，则该Cookie的默认路径为/login。
需要注意的是，每个路径都是一个独立的上下文，cookie只能在其设置的路径及其子路径下访问。如果路径设置不正确，可能导致cookie无法在预期的页面访问或被删除。
因此，在设置Cookie时，根据实际需求合理指定path参数，以确保cookie在预期的路径下有效。
3.指定可访问cookie的主机名
在设置cookie时，可以使用domain参数来指定可访问该cookie的主机名。domain参数用于限制cookie在哪个主机名下有效。只有与指定主机名匹配的URL才能访问该cookie。
以下是设置cookie时指定主机名的示例：
document.cookie = "username=John; domain=example.com";
在上面的示例中，将"username"的cookie设置为只能在example.com主机名下的所有URL访问。这意味着，只有example.com以及其子域名（如subdomain.example.com）下的页面才能读取这个Cookie。
默认情况下，如果不指定domain参数，cookie的默认主机名是设置Cookie的页面所属的主机名。例如，在http://example.com/login页面设置了一个cookie，则该Cookie的默认主机名为example.com。
需要注意的是，通过指定domain参数来限制cookie的主机名时，需要遵循一些规则：
- 主机名必须具有两个或更多的域名部分。例如，example.com是有效的，但.com或localhost是无效的。
- 主机名的设置仅适用于子域名，而无法在父域名下设置cookie。
因此，在设置cookie时，根据实际需求合理指定domain参数，以确保cookie在预期的主机名下有效。
二、读取cookie
需要在服务器环境下
读取（获取） cookie 同样使用document.cookie即可，该属性会返回一个字符串，字符串中包含除 max-age、expires、path 和 domain 等属性之外的所有 cookie 信息
读取cookie 的值，它会返回一个以分号分隔的键值对字符串，包含当前在浏览器中存储的所有cookie 。要获取特定cookie 的值，需要解析该字符串。
为了获取单个 cookie 的值，我们可以通过 split() 函数将包含 cookie 信息的字符串拆分为数组，然后再获取某个 cookie 的值，
以下是一个获取名为"username"的Cookie值的示例：
function getCookie(name) {
const cookieString = document.cookie;
const cookies = cookieString.split('; ');
for (const cookie of cookies) {
const [cookieName, cookieValue] = cookie.split('=');
if (cookieName === name) {
return cookieValue;
}
}
return null;
}
const username = getCookie('username');
也可以通过正则表达式
document.cookie = "name=张三";
let cookie = document.cookie;
let key ='name'
let reg = new RegExp("(^|\\s)"+ key +"=([^;]+)(;|$)");
console.log(cookie.match(reg)[2])
三、删除cookie
删除 cookie 与修改 cookie 类似，只需要重新将 cookie 的值设置为空，并将 expires 属性设置为一个过去的日期即可
以下是一个删除名为"username"的cookie 的示例：
const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() - 1);
document.cookie = 'username=; expires=${expirationDate.toUTCString()}';
需要注意的是，cookie 存储在浏览器中，可以被用户修改或删除。cookie 还有一些限制，例如每个域名下的cookie数量和存储大小都有限制。
在实际开发中，除了使用原生JavaScript操作cookie ，还可以使用现代JavaScript框架和库提供的cookie 管理工具，如js-cookie、universal-cookie等，以简化cookie 的操作和管理。
四、 封装构造通用的cookie处理函数
cookie的处理过程比较复杂，并具有一定的相似性。因此可以定义几个函数来完成cookie的通用操作，从而实现代码的复用。下面列出了常用的cookie操作及其函数实现。
//设置cookie
function setCookie(obj,time){
let date = new Date(new Date().getTime()+ time*24*60*60*1000).toUTCString();
for(let key in obj){
document.cookie = key+"="+obj[key]+"; expires="+ date;
}
},
//读取cookie
function getCookie(key){
return document.cookie.match( new RegExp("(^|\\s)"+ key +"=([^;]+)(;|$)"))[2]
},
//删除cookie
function removeCookie(key){
setCookie({[key]: "" }, -1)
}
