当前位置：首页 > 行业动态 > 正文

HTML存储cookie

HTML通过JS的 document.cookie存储Cookie，设置name=value及expires/path等属性，用于保存用户偏好或会话信息，需注意安全性（如

Cookie基础概念

Cookie是浏览器存储在用户设备上的小型文本文件，用于保存用户会话或配置信息，每个Cookie由键值对（name=value）和可选属性（如过期时间、路径、域等）组成。

设置Cookie

通过JavaScript的document.cookie属性设置Cookie，格式为：
document.cookie = "name=value; [expires=日期;] [path=路径;] [domain=域名;] [secure]"

属性 说明
expires 过期时间（UTC格式日期字符串），如expires=Wed, 09 Jun 2023 10:00:00 GMT
max-age 存活时间（秒），如max-age=3600表示1小时
path 生效路径，如path=/表示当前域名下所有路径均有效
domain 生效域名，如domain=.example.com（需服务器支持）
secure 仅HTTPS协议传输时生效
SameSite 跨站请求策略（Strict、Lax、None）

示例代码：

HTML存储cookie 第1张

// 设置名为"username"的Cookie，值经过编码，1小时后过期
document.cookie = "username=" + encodeURIComponent("张三") + "; max-age=3600; path=/";

读取Cookie

通过document.cookie获取所有Cookie，返回以分隔的字符串,需解析目标值。

示例代码： 

function getCookie(name) {
    const cookies = document.cookie.split('; '); // 分割为数组
    for (let cookie of cookies) {
        const [n, v] = cookie.split('='); // 分割键值
        if (n === name) {
            return decodeURIComponent(v); // 解码后返回值
        }
    }
    return null; // 未找到返回null
}

删除Cookie

将Cookie的max-age设为负数或过期时间设为过去时间。

示例代码： 

function deleteCookie(name) {
    document.cookie = name + "=; max-age=-1; path=/"; // 覆盖原Cookie
}

注意事项

  1. 大小限制：单个Cookie大小通常限制为4KB,每个域名最多存储约50个Cookie。
  2. 安全性：
    • 避免存储敏感信息（如密码），可结合HttpOnly（服务器端设置）防止JS访问。
    • 使用secure属性确保仅HTTPS传输。
  3. 路径与域：未显式声明时，默认路径为当前路径,域为当前域名。

相关问题与解答

问题1：Cookie与LocalStorage的区别是什么？

  • 存储位置：Cookie随HTTP请求头发送至服务器，LocalStorage仅存于本地。
  • 容量：Cookie约4KB/个，LocalStorage约5MB。
  • 生命周期：Cookie可设置过期时间，LocalStorage持久化。
  • 用途：Cookie常用于会话管理,LocalStorage适合长期存储非敏感数据。

问题2：如何防止XSS攻击窃取Cookie？

  • 设置HttpOnly：服务器响应头中添加Set-Cookie: name=value; HttpOnly，禁止JS访问。
  • 使用Secure属性：确保Cookie仅通过HTTPS传输。
  • 输入校验：对用户输入的数据严格过滤，避免反面脚本
0

相关文章