介绍
Cookies 是 Web 开发中的重要工具，它允许网站在客户端存储少量数据。在 Nuxt 3 中，处理 Cookies 变得更加简单和高效。本篇文章将全面介绍如何在 Nuxt 3 应用中使用 Cookies。巩固Nuxt3的知识，以便于我们学习即将发布的Nuxt4。
什么是 Nuxt 3 中的 Cookies
在 Nuxt 3 中，Cookies 可以在服务端和客户端操作。通过 useCookie 组合式函数，Nuxt 提供了一个统一的 API，适用于页面和组件的双端操作。
如何设置 Cookies 操作
在 Nuxt 3 中，你无需额外配置或导入即可使用 Cookies。useCookie 是内置的，并且会被自动导入，因此可以直接在组件、页面或组合式函数中使用。
读取 Cookies
要读取 Cookie，只需调用 useCookie：
const token = useCookie('token')
console.log(token.value) // 输出该 Cookie 的值
写入 Cookies
设置 Cookie 只需要为 useCookie 返回的 ref 赋值：
const token = useCookie('token')
token.value = 'my-new-token'
你还可以通过选项自定义 Cookie：
const token = useCookie('token', {
maxAge: 60 * 60 * 24 * 7, // 1 周
path: '/',
secure: true,
httpOnly: true
})
token.value = 'my-secure-token'
常用选项说明
- maxAge：设置 Cookie 的有效期（单位：秒）。例如，
60 * 60 * 24 * 7表示 7 天后过期。 - path：指定 Cookie 的作用路径。例如，
'/'使其适用于全站，'/admin'则仅适用于/admin下的页面。 - secure：为
true时，Cookie 只能通过 HTTPS 传输，保障敏感数据的安全。 - httpOnly：为
true时，Cookie 只能由服务端访问，无法通过 JavaScript 操作，从而防止跨站脚本攻击（XSS）。
其他选项：
- domain：指定 Cookie 的有效域名，默认为当前域名。
- sameSite：控制跨站请求时 Cookie 的发送规则：
'strict'：仅在同站请求时发送。'lax'：导航到源站时会发送，但不适用于跨站请求。'none'：同站与跨站请求均发送。
- expires：直接指定 Cookie 的到期日期，作为
maxAge的替代。
示例：
const userPreferences = useCookie('userPrefs', {
maxAge: 60 * 60 * 24 * 30, // 30 天
path: '/',
secure: true,
httpOnly: true,
domain: 'example.com',
sameSite: 'lax'
})
userPreferences.value = JSON.stringify({ theme: 'dark', language: 'en' })
删除 Cookies
将 Cookie 的值设置为 null 即可删除：
const token = useCookie('token')
token.value = null
在服务端处理 Cookies
在 Nuxt 3 的服务端，使用 h3 提供的 getCookie 和 setCookie 方法操作 Cookies。它们是自动导入的，无需额外设置。
示例：
export default defineEventHandler((event) => {
// 读取 Cookie
const token = getCookie(event, 'token')
// 设置 Cookie
setCookie(event, 'session', 'session-value', {
httpOnly: true,
secure: true,
maxAge: 60 * 60 * 24 * 7 // 1 周
})
return {
message: 'Cookie 处理成功'
}
})
常见用例
1. 用户认证
用于存储用户的认证令牌：
const authToken = useCookie('auth-token', {
maxAge: 60 * 60 * 24 * 7,
secure: true,
httpOnly: true
})
authToken.value = 'user-auth-token'
2. 主题偏好设置
记录用户的主题选择：
const theme = useCookie('theme', {
default: () => 'light',
watch: true
})
function toggleTheme() {
theme.value = theme.value === 'light' ? 'dark' : 'light'
}
3. 语言设置
存储用户的语言偏好：
const lang = useCookie('lang', {
default: () => 'en',
maxAge: 60 * 60 * 24 * 30
})
function setLanguage(newLang) {
lang.value = newLang
}
4. 购物车
保存购物车数据：
const cart = useCookie('shopping-cart', {
default: () => [],
watch: true,
encode: value => JSON.stringify(value),
decode: value => JSON.parse(value)
})
function addToCart(item) {
cart.value.push(item)
}
5. 用户同意管理
存储用户对 Cookies 的同意偏好：
const cookieConsent = useCookie('cookie-consent', {
default: () => ({ necessary: true, analytics: false, marketing: false }),
maxAge: 60 * 60 * 24 * 365,
encode: value => JSON.stringify(value),
decode: value => JSON.parse(value)
})
function updateConsent(category, value) {
cookieConsent.value[category] = value
}
6. 表单自动保存
防止用户填写的表单数据因页面刷新而丢失：
const formData = useCookie('form-autosave', {
default: () => ({}),
watch: true,
maxAge: 60 * 10, // 10 分钟
encode: value => JSON.stringify(value),
decode: value => JSON.parse(value)
})
function autoSaveForm(data) {
formData.value = data
}
结语
本篇文章了解了如何在 Nuxt 3 中灵活、安全地使用 Cookies。无论是基础用法还是复杂场景，合理的 Cookie 管理都能让你的应用更加个性化和安全。在实现 Cookie 功能时，始终将用户隐私和数据保护放在首位。
评论(0)