js 获取cookie的值|极客笔记

js 获取cookie的值

在Web开发中，cookie是一种存储在用户计算机上的小型数据，通常用于跟踪用户的状态、记住用户的登录信息等。在前端开发中，我们经常需要获取cookie的值以便作出相应的逻辑处理。本文将详细介绍如何使用JavaScript获取cookie的值。

什么是cookie

在介绍如何获取cookie值之前，我们先来了解一下cookie是什么。Cookie是一种在用户计算机上存储的文本文件，由服务器发送到浏览器，并且每次浏览器向同一服务器发送请求时都会将cookie发送回服务器。通过cookie，服务器可以存储用户的信息、状态等，以便在用户下次访问时进行识别和处理。

每个cookie都有一个名称和一个值，以键值对的形式存储。除了值之外，cookie还可以包含一些其他属性，比如过期时间、域名、路径等。

如何设置cookie

在JavaScript中可以使用document.cookie来设置和获取cookie。要设置一个cookie，只需简单地赋值给document.cookie即可。例如：

document.cookie = "username=John Doe";

上面的代码会在用户的计算机上设置一个名为username的cookie，其值为John Doe。如果要设置更多的属性，比如过期时间和路径等，可以使用如下格式：

document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

上面的代码设置了一个名为username的cookie，其值为John Doe，过期时间为2023年12月18日12:00:00 UTC，路径为根路径/。

如何获取cookie的值

要获取cookie的值，可以通过document.cookie来获取所有的cookie，并进行解析。通常，我们会编写一个函数来获取指定名称的cookie值。以下是一个获取指定名称cookie值的JavaScript函数：

function getCookie(name) {
    const cookieValue = document.cookie
        .split('; ')
        .find(row => row.startsWith(name + '='))
        .split('=')[1];
    return cookieValue;
}

上面的函数getCookie(name)传入一个cookie名称，通过document.cookie获取所有的cookie，并利用split和find方法找到指定名称的cookie值，最后返回该值。

示例

假设我们在用户登录成功后设置了一个名为token的cookie，我们可以使用上面的getCookie函数来获取该cookie的值，并对其进行相应的逻辑处理。以下是一个示例代码：

// 设置一个名为token的cookie
document.cookie = "token=abcdef123456";

// 定义获取cookie值的函数
function getCookie(name) {
    const cookieValue = document.cookie
        .split('; ')
        .find(row => row.startsWith(name + '='))
        .split('=')[1];
    return cookieValue;
}

// 获取名为token的cookie的值
const token = getCookie('token');
console.log(token);

假设用户已经登录成功，并且token的值为abcdef123456，那么上面的代码会输出abcdef123456。