如何使用Angular在静态页面中添加cookies

静态网站本身仅托管HTML/CSS/JS等静态资源，无需后端服务支持，直接通过原生JavaScript即可完成Cookie的读写删除操作，以下是可直接复用的实现逻辑：

1. 基础Cookie操作函数 #

以下代码可直接放入站点的公共JS文件中全局调用：

• 写入Cookie

/**
 * @param {string} name Cookie名称
 * @param {string} value Cookie存储值
 * @param {number} days 有效期，默认30天
 */
function setCookie(name, value, days = 30) {
  const expireDate = new Date();
  expireDate.setTime(expireDate.getTime() + (days * 24 * 60 * 60 * 1000));
  const expires = `expires=${expireDate.toUTCString()}`;
  document.cookie = `${name}=${encodeURIComponent(value)};${expires};path=/;SameSite=Lax`;
}
// 调用示例：存储用户选择的深色模式偏好
setCookie('site_theme', 'dark', 180)

• 读取Cookie

function getCookie(name) {
  const targetKey = `${name}=`;
  const decodedCookie = decodeURIComponent(document.cookie);
  const cookieList = decodedCookie.split(';');
  for (let i = 0; i < cookieList.length; i++) {
    const item = cookieList[i].trim();
    if (item.indexOf(targetKey) === 0) {
      return item.substring(targetKey.length, item.length);
    }
  }
  return '';
}
// 调用示例：页面加载时自动应用用户保存的主题
window.addEventListener('load', () => {
  const savedTheme = getCookie('site_theme');
  if (savedTheme === 'dark') {
    document.body.classList.add('dark-theme');
  }
})

• 删除Cookie

function deleteCookie(name) {
  document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 UTC;path=/;`;
}

2. 个人作品集站点常用Cookie场景参考 #

• 记录用户是否已同意隐私提示，避免每次访问重复弹出提示框
• 存储用户偏好的浏览主题（深色/浅色/跟随系统），无需用户每次访问手动切换
• 记录用户浏览过的作品集项目分类，下次访问时优先展示同分类内容
• 存储用户填写过的联系表单基础信息，重复提交时无需重复填写

3. 注意事项 #

• 原生JS操作的是客户端Cookie，单条存储上限约4KB，不要存储过大体积的内容
• 如果站点嵌入了第三方资源，可根据实际使用场景调整SameSite属性，避免跨域场景下Cookie读取失败
• 存储涉及用户隐私的非必要Cookie前，建议先获得用户授权，符合当地数据合规要求

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