Skip to content

使用JavaScript解析或序列化Cookie

Cookie是存储在浏览器中的小型数据片段。它们用于存储有关用户的信息，例如偏好设置，或跟踪用户活动。Cookie会随每个请求发送到服务器，并且可以被客户端和服务器访问和修改。

但是在浏览器中如何处理它们呢？如何将Cookie字符串解析为对象，或将对象序列化为Cookie字符串呢？ 奇怪的是，JavaScript没有完整的API来完成这个任务，但我们可以很容易地填补这些空白。

在我们开始处理Cookie之前，我们需要了解它们的格式。一个HTTP Cookie头字符串是一个由分号分隔的键值对字符串。例如：

const cookieString = document.cookie;
// 'foo=bar; equation=E%3Dmc%5E2'
/* 这表示一个包含两个Cookie名称-值对的Cookie存储：
  {
    foo: 'bar',
    equation: 'E=mc^2'
  }
*/

解析后的Cookie是将此字符串转换为对象的结果。序列化Cookie是相反的过程，将对象转换为字符串。

了解Cookie字符串的结构使我们能够解析它。

首先，我们将使用String.prototype.split()将其拆分为单个键值对。然后，使用Array.prototype.map()和String.prototype.split()我们将将键与值分开。最后，我们将使用Array.prototype.reduce()和decodeURIComponent()来创建一个包含所有键值对的对象。

const parseCookie = str =>
  str
    .split(';')
    .map(v => v.split('='))
    .reduce((acc, v) => {
      acc[decodeURIComponent(v[0].trim())] = decodeURIComponent(v[1].trim());
      return acc;
    }, {});

parseCookie('foo=bar; equation=E%3Dmc%5E2');
// { foo: 'bar', equation: 'E=mc^2' }

序列化Cookie要简单得多。使用模板字符串和encodeURIComponent()函数，我们可以创建适当的字符串。

const serializeCookie = (name, val) =>
  `${encodeURIComponent(name)}=${encodeURIComponent(val)}`;

serializeCookie('foo', 'bar'); // 'foo=bar'

[!TIP]

您应该阅读更多关于如何使用encodeURIComponent()函数，以及何时使用它的信息。