当前位置:   article > 正文

JS cookie的设置、读取和删除_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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Cpp五条/article/detail/149601
推荐阅读
相关标签
  

闽ICP备14008679号