如何在 Cookie 中存储 JSON 数据？

Cookie 中可以存储 JSON 数据，但需进行编码转换，如 Base64，以适应 Cookie 的文本存储限制。

Cookie 存储 JSON：详细解析与实践

在当今的互联网应用中，cookie 作为一种常用的客户端存储机制，广泛应用于会话管理、用户偏好设置以及跟踪用户行为等场景，而 JSON（JavaScript Object Notation）作为一种轻量级的数据交换格式，因其易于阅读和编写，同时也易于机器解析和生成，被广泛用于各种数据交互场合，如何将这两者结合起来，即如何在 cookie 中存储 JSON 数据呢？本文将对此进行详细解析，并提供实践指南。

Cookie 与 JSON 的基本概念

1、Cookie：是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上，常见的 cookie 属性包括名称、值、过期时间、路径、域等。

2、JSON：是一种基于文本的数据交换格式，它使用键值对的方式来表示数据，其中键是字符串，值可以是字符串、数字、布尔值、数组、对象或 null，JSON 格式的数据可以被多种编程语言轻松地解析和生成。

二、为什么需要在 Cookie 中存储 JSON

在 Web 开发中，有时需要将复杂的数据结构（如用户设置、购物车内容等）存储在客户端，以便在后续的请求中使用，虽然 cookie 通常用于存储简单的键值对，但通过将 JSON 字符串化后存储在 cookie 中，我们可以方便地存储和传输复杂的数据结构。

如何在 Cookie 中存储 JSON

要在 cookie 中存储 JSON 数据，可以按照以下步骤进行：

1、将 JSON 对象序列化为字符串：使用 JSON.stringify() 方法可以将 JavaScript 对象转换为 JSON 字符串。

2、设置 Cookie：使用 document.cookie 或其他 cookie 操作库（如 js-cookie）将 JSON 字符串设置为 cookie 的值。

3、读取 Cookie：当需要读取 cookie 中的 JSON 数据时，首先获取 cookie 的值，然后使用 JSON.parse() 方法将其反序列化为 JavaScript 对象。

下面是一个具体的示例：

// 假设我们有一个用户信息对象
var userInfo = {
    name: "张三",
    age: 30,
    preferences: {
        theme: "dark",
        language: "zh"
    }
};
// 将用户信息对象序列化为 JSON 字符串
var userInfoJson = JSON.stringify(userInfo);
// 设置 Cookie，假设 cookie 名为 'userInfo'
document.cookie = "userInfo=" + userInfoJson + "; path=/";
// 读取 Cookie 中的 JSON 数据
function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");
        if(name == cookiePair[0].trim()) {
            return cookiePair[1];
        }
    }
    return null;
}
// 获取 'userInfo' cookie 的值
var storedUserInfoJson = getCookie("userInfo");
// 将 JSON 字符串反序列化为 JavaScript 对象
var storedUserInfo = JSON.parse(storedUserInfoJson);
console.log(storedUserInfo);

在上面的示例中，我们首先创建了一个包含用户信息的对象userInfo，然后将其序列化为 JSON 字符串并存储在名为userInfo 的 cookie 中，我们定义了一个getCookie 函数来读取指定名称的 cookie 值，并使用JSON.parse() 方法将读取到的 JSON 字符串反序列化为 JavaScript 对象，我们输出了从 cookie 中读取并反序列化后的用户信息对象。