JavaScript Cookies存储值-代码号

在 Web 开发中，我们经常需要存储用户的多项信息。虽然浏览器 Cookie 本身只支持单条键值对存储，但通过巧妙的编程手法，我们可以突破这个限制。本文将结合实际代码案例，详细剖析三种不同的实现方案。

为什么需要特殊处理？

Cookie 的设计初衷是存储简单的会话标识，值以 "key=value" 格式的字符串存在。直接尝试拼接多个键值对，如 "Name=张三;Email=zhangsan@test.com"，并不能达到预期效果。浏览器会将分号视为 Cookie 属性的分隔符，而非数据内容的分隔符。

错误示范：直接拼接字符串

很多初学者容易犯的一个错误，就是尝试将所有数据直接拼接到一个 Cookie 中。我们来看一个典型的反例：

<!DOCTYPE html>
<html>
<head>
    <title>代码号：Cookie错误示例</title>
</head>
<body>
    <p>用户名：<input type="text" id="wrongName" value="张三"></p>
    <p>邮箱：<input type="email" id="wrongEmail" value="zhangsan@test.com"></p>
    <button onclick="wrongSet()">错误设置</button>
    <button onclick="wrongGet()">错误读取</button>

    <script>
    function wrongSet() {
        // 错误做法：试图用分号拼接多个键值对
        let info = "name=" + document.getElementById('wrongName').value + 
                   ";email=" + document.getElementById('wrongEmail').value;
        document.cookie = info;
    }
    
    function wrongGet() {
        alert(document.cookie);
    }
    </script>
</body>
</html>

当你运行这段代码并点击"错误读取"时，会发现只有第一个键值对"name=张三"被成功存储。这是因为浏览器将第二个分号后的内容email=zhangsan@test.com误判为 Cookie 的过期时间或他属性参数。

方案一：JSON 序列化存储（推荐）

针对上述问题，较优雅的解决方案是使用 JSON 格式。将多个数据封装成一个对象，再序列化为字符串存储，读取时反序列化还原。这种方法的优势在于数据结构清晰，且易于维护。

<!DOCTYPE html>
<html>
<head>
    <title>代码号学习：JSON序列化Cookie</title>
</head>
<body>
    <img src="https://www.ebingou.cn/biancheng/images/s2.jpg" alt="代码号学习编程" style="max-width:100%;">
    <p><strong>用户信息录入</strong></p>
    <p>姓名：<input type="text" id="jsonName" value="李四"></p>
    <p>邮箱：<input type="email" id="jsonEmail" value="lisi@ebingou.cn"></p>
    <p>偏好语言：<input type="text" id="jsonLang" value="JavaScript"></p>
    <button onclick="setJsonCookie()">存储JSON格式Cookie</button>
    <button onclick="getJsonCookie()">读取并解析JSON</button>

    <script>
    function setJsonCookie() {
        // 1. 创建对象收集数据
        let userProfile = {
            userName: document.getElementById('jsonName').value,
            userEmail: document.getElementById('jsonEmail').value,
            userLang: document.getElementById('jsonLang').value,
            lastVisit: '2026-03-16'  // 添加时间戳便于追踪
        };
        
        // 2. 序列化为JSON字符串
        let jsonData = JSON.stringify(userProfile);
        
        // 3. 设置Cookie，建议同时设置路径
        document.cookie = "userData=" + jsonData + "; path=/";
        alert('Cookie已通过JSON格式存储');
    }
    
    function getJsonCookie() {
        let cookieStr = document.cookie;
        if (cookieStr.length === 0) {
            alert('当前没有Cookie数据');
            return;
        }
        
        // 简单解析Cookie，生产环境建议使用更完善的解析函数
        let parts = cookieStr.split('; ');
        for(let i = 0; i < parts.length; i++) {
            let pair = parts[i].split('=');
            if(pair[0] === 'userData') {
                try {
                    // 反序列化JSON字符串
                    let userData = JSON.parse(pair[1]);
                    alert(`姓名：${userData.userName}\n邮箱：${userData.userEmail}\n语言：${userData.userLang}\n之后访问：${userData.lastVisit}`);
                } catch(e) {
                    alert('JSON解析失败，数据已损坏');
                }
                return;
            }
        }
        alert('未找到userData Cookie');
    }
    </script>
</body>
</html>

从个人经验来看，JSON 方案是我在日常项目中最常用的。它特别适合存储用户偏好设置、表单临时数据等结构化信息。Cookie 总大小限制在 4KB 左右，因此不要存储过多数据。

方案二：多 Cookie 独立存储

另一种直观的解决方案是为每个数据项单独创建一个 Cookie。这种方法简单直接，适合数据项较少且彼此关联性不强的场景。

<!DOCTYPE html>
<html>
<head>
    <title>代码号编程：多Cookie独立存储</title>
</head>
<body>
    <img src="https://www.ebingou.cn/biancheng/images/3.jpg" alt="代码号编程示例" style="max-width:100%;">
    <p><strong>用户偏好设置</strong></p>
    <p>主题颜色：<input type="text" id="themeColor" value="dark"></p>
    <p>字体大小：<input type="text" id="fontSize" value="16px"></p>
    <p>通知开关：<input type="text" id="notification" value="on"></p>
    <button onclick="setMultiCookies()">分别存储Cookie</button>
    <button onclick="getMultiCookies()">读取所有Cookie</button>

    <script>
    function setMultiCookies() {
        // 每个赋值语句创建一个独立的Cookie
        document.cookie = "theme=" + document.getElementById('themeColor').value + "; path=/";
        document.cookie = "font=" + document.getElementById('fontSize').value + "; path=/";
        document.cookie = "notify=" + document.getElementById('notification').value + "; path=/";
        alert('已创建3个独立Cookie');
    }
    
    function getMultiCookies() {
        let allCookies = document.cookie;
        if(allCookies) {
            // 简单展示所有Cookie，项目开发中需要按需解析
            alert('当前所有Cookie：\n' + allCookies.replace(/;/g, '\n'));
        } else {
            alert('未找到任何Cookie');
        }
    }
    </script>
</body>
</html>

这种方式虽然简单，但有一个明显的缺点：当需要操作多个相关数据时，必须分别设置和获取。而且浏览器对单个域的 Cookie 总数有限制（为 20-50 个），大量使用触及上限。

方案三：自定义解析字符串

还有一种介于两者之间的方法：使用自定义分隔符拼接字符串。虽然不如 JSON 方案规范，但在特定场景下也有价值。

<!DOCTYPE html>
<html>
<head>
    <title>代码号学习：自定义分隔符</title>
</head>
<body>
    <p><strong>临时表单数据</strong></p>
    <p>搜索关键词：<input type="text" id="searchKey" value="JavaScript教程"></p>
    <p>过滤条件：<input type="text" id="filterBy" value="新"></p>
    <p>每页数量：<input type="text" id="pageSize" value="20"></p>
    <button onclick="setCustomCookie()">存储自定义格式</button>
    <button onclick="getCustomCookie()">解析自定义格式</button>

    <script>
    function setCustomCookie() {
        // 使用"|"作为分隔符，注意转义
        let searchData = document.getElementById('searchKey').value + '|' + 
                        document.getElementById('filterBy').value + '|' + 
                        document.getElementById('pageSize').value;
        document.cookie = "searchPrefs=" + encodeURIComponent(searchData) + "; path=/";
        alert('已使用自定义格式存储');
    }
    
    function getCustomCookie() {
        let cookieStr = document.cookie;
        let searchPrefs = cookieStr.match(/searchPrefs=([^;]+)/);
        
        if(searchPrefs) {
            // 解码并分割字符串
            let decoded = decodeURIComponent(searchPrefs[1]);
            let parts = decoded.split('|');
            alert(`关键词：${parts[0]}\n过滤：${parts[1]}\n每页数量：${parts[2]}`);
        } else {
            alert('未找到搜索偏好设置');
        }
    }
    </script>
</body>
</html>

本节课程知识要点

不难看出，针对不同场景我给出以下实践建议：

优先使用 JSON 方案：对于大多数需要存储多字段的场景，JSON 序列化是最清晰、最易扩展的方式。它支持复杂数据结构，且解析逻辑统一。
数据量小时考虑多 Cookie：如果只有 2-3 个不相关的标志位，独立存储更简单。
避免自定义分隔符：除非有特殊需求，否则不建议自己发明解析规则。容易遇到转义问题，且可读性较差。
别忘了 encodeURIComponent：无论是 JSON 字符串还是自定义格式，都应使用 encodeURIComponent 编码，避免特殊字符破坏 Cookie 格式。
设置路径和过期时间：应该为 Cookie 设置合理的 path（如 path=/）和 expires/max-age，控制作用域和生命周期。

我在开发中还注意到，很多开发者容易忽视 Cookie 的大小限制和同源策略。建议每次设置 Cookie 后，通过浏览器开发者工具查看 Application 面板，确认数据是否正确存储。这能帮你快速定位问题。

本文标签：

JavaScript Cookies存储值