首页 > 网络编程 > JavaScript > javascript技巧 > JS cookie设置、读取和删除

JS cookie的设置、读取和删除方法例子

2024-01-17 11:24:57 作者：你人还怪好的

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=张三";

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)
}

总结

到此这篇关于JS cookie的设置、读取和删除方法的文章就介绍到这了,更多相关JS cookie设置、读取和删除内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！