前端八股浏览器网络（2）---cookie,localStorage,sessionStorage

一、核心定义
二、核心区别速览
三、详解
[1. Cookie](#1. Cookie)
[2. localStorage](#2. localStorage)
[3. sessionStorage](#3. sessionStorage)
四、对比表
[五、localStorage 如何清除/失效？](#五、localStorage 如何清除/失效？)
[1. 手动清除（最常用）](#1. 手动清除（最常用）)
[2. JS 代码清除](#2. JS 代码清除)
[3. 模拟过期（localStorage 本身没有过期时间）](#3. 模拟过期（localStorage 本身没有过期时间）)
[4. 用户清除浏览器数据](#4. 用户清除浏览器数据)
[六、Cookie 的设置方式](#六、Cookie 的设置方式)
[方式1：后端通过 Set-Cookie 设置（最常用）](#方式1：后端通过 Set-Cookie 设置（最常用）)
[方式2：前端通过 JS 设置（少用，不能设置 HttpOnly）](#方式2：前端通过 JS 设置（少用，不能设置 HttpOnly）)
七、面试高频问题
[Q1：Cookie、localStorage、sessionStorage 的区别？](#Q1：Cookie、localStorage、sessionStorage 的区别？)
[Q2：localStorage 怎么设置过期时间？](#Q2：localStorage 怎么设置过期时间？)
[Q3：Cookie 的 HttpOnly 属性有什么用？](#Q3：Cookie 的 HttpOnly 属性有什么用？)
Q4：什么时候用哪个？
[Q5：为什么本地双击打开 HTML 文件，Cookie 设置不了？](#Q5：为什么本地双击打开 HTML 文件，Cookie 设置不了？)
[Q6：本地开发时怎么测试 Cookie？](#Q6：本地开发时怎么测试 Cookie？)
[Q7：localStorage 在 file:// 下能用吗？](#Q7：localStorage 在 file:// 下能用吗？)

一、核心定义

存储方式	定义	一句话
Cookie	服务器通过响应头 Set-Cookie 种在浏览器的小型文本数据	服务端种，自动带
localStorage	HTML5 持久化本地存储，除非手动删除，否则永久有效	永久存，不清不丢
sessionStorage	HTML5 会话级本地存储，页面关闭就清除	会话存，关页没

二、核心区别速览

对比维度	Cookie	localStorage	sessionStorage
有效期	设置的过期时间	永久（手动清除）	会话结束（关页面）
存储大小	约 4KB	约 5-10MB	约 5-10MB
是否携带到服务端	✅ 自动携带	❌ 不携带	❌ 不携带
设置方式	服务端 Set-Cookie 或 JS	JS 设置	JS 设置
同源策略	✅ 遵循	✅ 遵循	✅ 遵循
跨域请求	❌ 默认不携带	N/A	N/A

三、详解

特点：

服务器通过响应头 Set-Cookie 种到浏览器
每次同源请求会自动携带到服务端
主要用于登录状态、会话标识、用户追踪

javascript 复制代码

// 前端设置 Cookie
document.cookie = "username=张三; path=/; max-age=86400"

// 读取 Cookie
console.log(document.cookie)  // "username=张三; ..."

// 删除 Cookie（设置过期时间为过去）
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/"

安全属性：

javascript 复制代码

Set-Cookie: sessionId=abc123; 
  Path=/; 
  HttpOnly;      # JS 无法读取，防 XSS
  Secure;        # 只在 HTTPS 传输
  SameSite=Lax;  # 防 CSRF
  Max-Age=86400  # 有效期 1 天

2. localStorage

特点：

永久存储，除非手动清除
不会自动携带到服务端
适合存储不敏感的数据、用户偏好设置、主题等

javascript 复制代码

// 存储
localStorage.setItem('key', 'value')
localStorage.setItem('user', JSON.stringify({ name: '张三' }))

// 读取
const value = localStorage.getItem('key')
const user = JSON.parse(localStorage.getItem('user'))

// 删除单个
localStorage.removeItem('key')

// 清空所有
localStorage.clear()

3. sessionStorage

特点：

会话级存储，页面关闭就清除
不同标签页隔离
适合临时数据、表单草稿、页面状态

javascript 复制代码

// 用法与 localStorage 完全一样
sessionStorage.setItem('key', 'value')
sessionStorage.getItem('key')
sessionStorage.removeItem('key')
sessionStorage.clear()

四、对比表

对比维度	Cookie	localStorage	sessionStorage
有效期	设置的过期时间	永久（手动清除）	会话结束（关页面）
存储大小	约 4KB	约 5-10MB	约 5-10MB
是否携带到服务端	✅ 自动携带	❌ 不携带	❌ 不携带
设置方式	服务端 Set-Cookie 或 JS	JS 设置	JS 设置
跨标签页共享	✅ 共享	✅ 共享	❌ 不共享
同源策略	✅ 遵循	✅ 遵循	✅ 遵循
跨域请求	❌ 默认不携带	N/A	N/A
主要用途	登录态、会话标识	持久化配置、缓存	临时数据、页面状态

五、localStorage 如何清除/失效？

1. 手动清除（最常用）

打开浏览器控制台 → Application → Local Storage → 选中域名 → 右键 Clear

2. JS 代码清除

javascript 复制代码

// 删除某一个
localStorage.removeItem('key')

// 清空所有
localStorage.clear()

3. 模拟过期（localStorage 本身没有过期时间）

javascript 复制代码

// 存储时带时间戳
function setWithExpiry(key, value, ttl) {
  const item = {
    value: value,
    expiry: Date.now() + ttl  // 过期时间戳
  }
  localStorage.setItem(key, JSON.stringify(item))
}

// 读取时检查是否过期
function getWithExpiry(key) {
  const itemStr = localStorage.getItem(key)
  if (!itemStr) return null
  
  const item = JSON.parse(itemStr)
  if (Date.now() > item.expiry) {
    localStorage.removeItem(key)
    return null
  }
  return item.value
}

// 使用
setWithExpiry('token', 'abc123', 3600000)  // 1小时过期
const token = getWithExpiry('token')

4. 用户清除浏览器数据

用户清除缓存、网站数据时，localStorage 会被清除。

复制代码

HTTP/1.1 200 OK
Set-Cookie: sessionId=abc123; Path=/; HttpOnly; Secure; SameSite=Lax
Set-Cookie: userId=123; Path=/; Max-Age=86400

方式2：前端通过 JS 设置（少用，不能设置 HttpOnly）

复制代码

document.cookie = "username=张三; path=/; max-age=86400"
document.cookie = "theme=dark; path=/; expires=Wed, 21 Oct 2025 07:28:00 GMT"

七、面试高频问题

答：

有效期：Cookie 按设置时间，localStorage 永久，sessionStorage 会话级

大小：Cookie 约 4KB，localStorage/sessionStorage 约 5-10MB

是否携带：Cookie 自动携带到服务端，其他两个不携带

跨标签页：localStorage 和 Cookie 共享，sessionStorage 不共享

Q2：localStorage 怎么设置过期时间？

答： localStorage 本身不支持过期时间，需要手动模拟：存储时同时存时间戳，读取时判断是否过期，过期则删除。

答：设置了 HttpOnly 的 Cookie 无法通过 JS 读取（document.cookie 访问不到），只能由浏览器自动携带，可以有效防止 XSS 攻击窃取 Cookie。

Q4：什么时候用哪个？

答：

登录态/会话 → Cookie（HttpOnly + Secure）
用户配置/主题 → localStorage
页面临时状态/表单草稿 → sessionStorage

A：因为双击打开使用的是 file:// 协议，没有域名和 HTTP 协议支持。Cookie 的设计依赖域名绑定，浏览器出于安全考虑，在 file:// 协议下禁用了 Cookie 功能。

A：必须使用本地开发服务器，如 http://localhost:3000，不能直接双击打开 HTML 文件。

Q7：localStorage 在 file:// 下能用吗？

A： localStorage 在 file:// 协议下部分浏览器可用，但不推荐依赖，建议使用本地开发服务器。

复制代码

Cookie：服务端种，自动带，4KB，有期限
localStorage：永久存，不清不丢，5MB
sessionStorage：会话存，关页没，5MB

选择口诀：
登录用 Cookie（安全）
配置用 localStorage（持久）
临时用 sessionStorage（关页没）

前端八股浏览器网络（2）---cookie,localStorage,sessionStorage

一、核心定义

二、核心区别速览

三、详解

1. Cookie

2. localStorage

3. sessionStorage

四、对比表

五、localStorage 如何清除/失效？

1. 手动清除（最常用）

2. JS 代码清除

3. 模拟过期（localStorage 本身没有过期时间）

4. 用户清除浏览器数据

六、Cookie 的设置方式

方式1：后端通过 Set-Cookie 设置（最常用）

方式2：前端通过 JS 设置（少用，不能设置 HttpOnly）

七、面试高频问题

Q1：Cookie、localStorage、sessionStorage 的区别？

Q2：localStorage 怎么设置过期时间？

Q3：Cookie 的 HttpOnly 属性有什么用？

Q4：什么时候用哪个？

Q5：为什么本地双击打开 HTML 文件，Cookie 设置不了？

Q6：本地开发时怎么测试 Cookie？

Q7：localStorage 在 file:// 下能用吗？