JS cookie的设置、读取和删除_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=张三";
1

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
2
3
4

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

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

2.指定可访问cookie的路径

在设置Cookie时，可以使用path参数来指定可访问该cookie的路径。path参数用于限制cookie在哪个路径下有效。只有与指定路径匹配的URL才能访问该Cookie。

以下是设置Cookie时指定路径的示例：

document.cookie = "username=John; path=/example";
1

在上面的示例中，将"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";
1

在上面的示例中，将"username"的cookie设置为只能在example.com主机名下的所有URL访问。这意味着，只有example.com以及其子域名（如subdomain.example.com）下的页面才能读取这个Cookie。
默认情况下，如果不指定domain参数，cookie的默认主机名是设置Cookie的页面所属的主机名。例如，在http://example.com/login页面设置了一个cookie，则该Cookie的默认主机名为example.com。

需要注意的是，通过指定domain参数来限制cookie的主机名时，需要遵循一些规则：

1. 主机名必须具有两个或更多的域名部分。例如，example.com是有效的，但.com或localhost是无效的。
2. 主机名的设置仅适用于子域名，而无法在父域名下设置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');
1
2
3
4
5
6
7
8
9
10
11
12
13

也可以通过正则表达式

document.cookie = "name=张三";
let cookie = document.cookie;
let key ='name'
let reg = new RegExp("(^|\\s)"+ key +"=([^;]+)(;|$)");
console.log(cookie.match(reg)[2])
1
2
3
4
5

三、删除cookie

删除 cookie 与修改 cookie 类似，只需要重新将 cookie 的值设置为空，并将 expires 属性设置为一个过去的日期即可
以下是一个删除名为"username"的cookie 的示例：

const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() - 1);
document.cookie = 'username=; expires=${expirationDate.toUTCString()}';
1
2
3

需要注意的是，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)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19