如何在含引号的方法中设置Cookie？请求校验Cookie获取代码

我想把注册页面的用户名信息传到登录页面，试了这段代码设置Cookie：

document.cookie = "username = document.getElementById("username-input").value"

但getElementById里的引号把Cookie语法搞坏了，去掉引号后还是没用。我已经声明了username变量并赋值为输入框的值，现在附上Cookie获取代码，帮忙看看能不能正常获取：

function getCookie(name) {
    var cookieArr = document.cookie.split(";");

    for(var i = 0; i <cookieArr.length; i++) {
        var cookiePair = cookieArr[i].split("=");

        if(name == cookiePair[0].trim()) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
}

let username = getCookie("username");
let password = getCookie("password");

解决与校验 #

1. 修复Cookie设置的问题 #

你原来的代码错误在于直接把document.getElementById("username-input").value当成字符串写进Cookie值里，还出现了引号嵌套冲突。既然已经把输入框的值存在username变量里，正确写法应该是：

// 先确保username变量已获取到输入框的值
const username = document.getElementById("username-input").value;
// 设置Cookie，注意编码和全局路径
document.cookie = `username=${encodeURIComponent(username)}; path=/`;

• 用模板字符串（反引号）避免引号嵌套问题；
• 用encodeURIComponent编码值，防止用户名含特殊字符（空格、@等）导致Cookie失效；
• 加上path=/，确保全站页面都能访问到这个Cookie（默认Cookie路径是当前页面，跨路径会取不到）。

2. 校验Cookie获取代码 #

你写的getCookie函数逻辑是正常的：

• 按分号分割document.cookie得到Cookie数组，遍历每个键值对；
• 用trim()去掉键名前后空格（Cookie字符串可能带空格，比如" username=xxx"）；
• 匹配到对应名称后，用decodeURIComponent解码值，和设置时的编码对应。

唯一要注意：如果找不到对应Cookie，函数会返回undefined，使用时可以加个判断：

let username = getCookie("username");
if (username) {
    // 拿到用户名，执行后续操作
} else {
    // 未获取到，做提示或其他处理
}

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