如何将Cookie解析后字符串形式的数组转为真实JavaScript数组

我的Cookie中包含%字符，用以下JavaScript代码解析后，objName字段的值是字符串形式的数组，需要把它转换成真实的JavaScript数组。

原解析代码 #

var cookies = (document.cookie);
var output = {};
cookies.split(/\s*;\s*/).forEach(function (pair) {
    pair = pair.split(/\s*=\s*/);
    var name = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair.splice(1).join('='));
    output[name] = value;
});
console.log(output);

控制台输出结果 #

{"objName":"[{\"key\":1,\"key2\":\"value 123\",\"key3\":\"value123\"},{\"key\":1,\"key2\":\"value 123\",\"key3\":\"value123\"}]"}

需求 #

将objName字段的字符串形式数组转为真实数组，最终得到如下格式的内容：

objName=[{"key":1,"key2":"value 123","key3":"value123"},{"key":1,"key2":"value 123","key3":"value123"}]

解决方法 #

使用JSON.parse()方法就能把字符串格式的数组解析成真实的JavaScript数组，修改原代码即可实现：

修改后的代码 #

var cookies = document.cookie;
var output = {};
cookies.split(/\s*;\s*/).forEach(function (pair) {
    pair = pair.split(/\s*=\s*/);
    var name = decodeURIComponent(pair[0]);
    var value = decodeURIComponent(pair.splice(1).join('='));
    
    // 尝试把值解析为JSON，兼容非JSON格式的Cookie字段
    try {
        value = JSON.parse(value);
    } catch (e) {
        // 解析失败则保持原字符串
    }
    
    output[name] = value;
});

// 查看转换后的对象
console.log(output);
// 输出指定格式的字符串
console.log(`objName=${JSON.stringify(output.objName)}`);

说明 #

• 加入try-catch是为了防止Cookie中其他非JSON格式的字段导致代码报错，保证解析过程稳定。
• 转换完成后，output.objName就是可直接操作的真实数组；如果需要输出成指定的字符串格式，用JSON.stringify()再转换一次即可。

内容的提问来源于stack exchange，提问作者sumitkhatrii