如何在JS中设置、读取cookie并将cookie值赋值给变量？

Cookie基础工作原理 #

• Cookie是浏览器在本地存储的小型文本数据，单条大小上限约4KB，支持设置过期时间
• 未设置HttpOnly属性的Cookie可以通过JS直接读写，同域名下所有页面默认可以共享访问
• 原生JS没有内置的cookie.get/cookie.set方法，需要自行封装读写逻辑

现有代码问题 #

你提供的代码存在3处明显错误：

1. 变量赋值错误使用冒号:，应该用等号=
2. 末尾多余});闭合符号
3. 未封装Cookie读写方法，直接调用cookie.get/set会抛出未定义错误

完整可运行实现代码 #

// 读取指定名称的Cookie
function getCookie(cookieName) {
  const cookieStr = `; ${document.cookie}`;
  const cookieArr = cookieStr.split(`; ${cookieName}=`);
  if (cookieArr.length === 2) return decodeURIComponent(cookieArr.pop().split(';').shift());
}

// 写入Cookie，默认有效期30天
function setCookie(cookieName, cookieValue, expireDays = 30) {
  const expireTime = new Date();
  expireTime.setTime(expireTime.getTime() + expireDays * 24 * 60 * 60 * 1000);
  document.cookie = `${cookieName}=${encodeURIComponent(cookieValue)};expires=${expireTime.toUTCString()};path=/`;
}

// 业务逻辑
let username = getCookie('name');
if (!username) {
  username = prompt('请输入用户名：');
  // 校验空输入、全空格、用户点取消的情况
  if (!username || username.trim() === '') {
    alert('请输入有效的用户名');
  } else {
    setCookie('name', username.trim());
  }
}

// 如需将用户名显示到页面，可添加以下代码，替换为你页面的对应元素ID即可
// document.querySelector('#username-display').innerText = username || '未登录用户';

逻辑说明 #

• 页面加载优先读取Cookie存储的用户名，存在的话直接使用，不会弹出弹窗
• 仅当Cookie中没有存储用户名时，才弹出prompt要求输入
• 输入校验覆盖了空输入、全空格、用户点击取消三种无效场景
• Cookie默认存储30天，调用setCookie时传入第三个参数可自定义有效期，例如setCookie('name', username, 7)就是7天过期
• 读写时加了编解码处理特殊字符，避免用户名带特殊符号导致Cookie读写异常
• 设置path=/保证全站所有路径都可以读取该Cookie，不会出现子页面读不到的问题

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