JavaScript存储Cookie时仅保存部分数据，编码和JSON.stringify处理无效

根因说明 #

• Cookie规范对值的可使用字符有明确限制，*分号(;)、逗号(,)、空格以及各类ASCII控制字符都不允许直接出现在Cookie值中，一旦值中出现上述字符时，浏览器会自动从该字符位置截断Cookie内容，仅保留之前的部分生效。仅做JSON序列化但未做Cookie兼容的编码处理，就会出现内容截断的问题。

修复代码 #

依赖引入（HTML部分） #

<script src="https://cdn.jsdelivr.net/npm/ua-parser-js@0.7.28/src/ua-parser.min.js"></script>

存储Cookie逻辑（JS部分） #

var parser = new UAParser();
var result = parser.getResult();

console.log(result.ua);
// 序列化后先做URL编码再存入Cookie
document.cookie = "cookiename=" + encodeURIComponent(JSON.stringify(result.ua));

读取Cookie逻辑（JS部分） #

function getCookie(cookieName) {
    const cookieStr = `; ${document.cookie}`;
    const cookieSegments = cookieStr.split(`; ${cookieName}=`);
    if (cookieSegments.length === 2) {
        const encodedValue = cookieSegments.pop().split(';').shift();
        return JSON.parse(decodeURIComponent(encodedValue));
    }
    return null;
}

// 调用示例
const uaInfo = getCookie('cookiename');
console.log(uaInfo);

调试参考截图 #

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