CSS变量不能直接存JSON，需先JSON.stringify()再encodeURIComponent()编码后存入，读取时须先decodeURIComponent()再JSON.parse()，否则会报错；适用于轻量、低频的结构化元信息。
CSS变量本身不能直接存JSON，但可以曲线救国
CSS自定义属性（--my-data）只接受字符串值，JSON.stringify() 后的字符串能存，但原生CSS无法解析它——浏览器会把 --data: {"a":1} 当作无效声明并静默丢弃，因为花括号和冒号在CSS值中不合法。真正能安全写入的只有经过编码的字符串。
用 encodeURIComponent() 编码后存入CSS变量
这是最稳妥的序列化方式：它把 {、}、:、" 等字符转成 %7B、%7D、%3A、%22，CSS完全接受。读取时再用 decodeURIComponent() 还原，最后 JSON.parse()。
示例：
const data = { user: "alice", roles: ["admin", "editor"] };
document.documentElement.style.setProperty(
"--json-data",
encodeURIComponent(JSON.stringify(data))
);
对应CSS中可这样声明（仅用于初始值或调试）：
立即学习“前端免费学习笔记（深入）”；
:root {
--json-data: "%7B%22user%22%3A%22alice%22%2C%22roles%22%3A[%22admin%22%2C%22editor%22]%7D";
}
读取时必须按顺序解码 + 解析，顺序错就报错
常见错误是跳过 decodeURIComponent() 直接 JSON.parse()，结果得到 Unexpected token % in JSON at position 0。正确流程是：
- 用
getComputedStyle(document.documentElement).getPropertyValue("--json-data")取出字符串 - 先
decodeURIComponent()，还原为标准JSON字符串 - 再
JSON.parse()得到对象
封装成工具函数更安全：
function getJsonFromCssVar(varName) {
const encoded = getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
if (!encoded) return null;
try {
return JSON.parse(decodeURIComponent(encoded));
} catch (e) {
console.warn(`Failed to parse ${varName}:`, e);
return null;
}
}
// 使用
const data = getJsonFromCssVar("--json-data"); // → { user: "alice", ... }
注意浏览器兼容性与性能边界
CSS变量不是JS内存，它走的是样式计算链路。频繁读写（比如在 requestAnimationFrame 里）会触发重排/重绘，比直接操作JS对象慢一个数量级。另外：
• IE完全不支持CSS变量，别考虑兼容
• Safari 9.1+、Chrome 49+、Firefox 31+ 支持，但旧版Safari对长编码字符串有截断风险（实测超8KB可能丢数据）
• 如果JSON含Unicode字符（如中文），encodeURIComponent() 没问题，但手写CSS变量值时必须确保文件编码为UTF-8，否则CSS解析阶段就失败
真要传复杂数据，优先走 dataset 或模块状态管理；CSS变量只适合传轻量、低频、需被CSS逻辑消费的结构化元信息（比如主题色配置、断点阈值数组）。
