什么是 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
}