JavaScript Cookie 存儲數組對象：JSON.stringify 序列化 + JSON.parse 反序列化

問題現象

var arr = [{a:1}, {b:2}];
setCookie('key', arr);  // 直接存對象
// Cookie 實際值：[object Object],[object Object]
getCookie('key'); // 讀出字符串 "[object Object],[object Object]"，無法還原數組

根因

Cookie 只能存**字符串**。直接賦值對象會隱式調用 toString()，輸出 "[object Object]"，信息丟失。

正確流程：序列化 → 編碼 → 存儲 / 讀取 → 解碼 → 反序列化

// 存儲
function setCookie(name, value, days) {
    var json = JSON.stringify(value);           // 1. 對象 → JSON 字符串
    var encoded = encodeURIComponent(json);     // 2. 編碼特殊字符(分號、逗號、空格等)
    var expires = "";
    if (days) {
        var d = new Date();
        d.setTime(d.getTime() + days * 86400000);
        expires = "; expires=" + d.toUTCString();
    }
    document.cookie = name + "=" + encoded + expires + "; path=/";
}

// 讀取
function getCookie(name) {
    var prefix = name + "=";
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
        var c = cookies[i].trim();
        if (c.indexOf(prefix) === 0) {
            var encoded = c.substring(prefix.length);
            var json = decodeURIComponent(encoded);  // 3. 解碼
            return JSON.parse(json);                 // 4. JSON 字符串 → 對象/數組
        }
    }
    return null;
}

// 使用
var arr = [{a:1}, {b:2}];
setCookie('myArr', arr, 7);
var restored = getCookie('myArr');  // 還原為 [{a:1}, {b:2}]
console.log(restored[0].a); // 1

關鍵點

• JSON.stringify/parse 是標準序列化方案，支援嵌套對象、數組、數字、布爾、null。
• encodeURIComponent/decodeURIComponent 必須配對使用，防止 JSON 中的分號、等號、空格破壞 Cookie 格式。
• 大小限制：單 Cookie ≤ 4KB，數組過大需分片存儲或改用 localStorage (5MB+)。
• 舊瀏覽器兼容**：IE7- 無原生 JSON，需引入 json2.js（<!--[if lt IE 8]><script src="json2.js"></script><![endif]-->）。

進階：封裝通用 Cookie 工具類

const CookieUtil = {
    set(name, value, days) { /* 上述邏輯 */ },
    get(name) { /* 上述邏輯 */ },
    remove(name) { document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; }
};

總結

JS Cookie 存數組/對象：**JSON.stringify 序列化 → encodeURIComponent 編碼 → 存儲**；讀取時**解碼 → JSON.parse 反序列化**。配合大小限制檢查、舊瀏覽器 polyfill，即可可靠持久化結構化數據。