Skip to main content
Svelte 基础
介绍
响应式
属性
逻辑
事件
绑定
类和样式
Actions
过渡动画
Svelte 进阶
高级响应性
复用内容
Motion
高级绑定
高级过渡效果
Context API
特殊元素
<script module>
后续步骤
SvelteKit 基础
介绍
路由
加载数据
请求头和 Cookie
共享模块
表单
API 路由
$app/state
错误和重定向
SvelteKit 进阶
钩子函数
页面选项
链接选项
高级路由
高级加载
环境变量
结论

setHeaders 函数不能用于设置 Set-Cookie 头。相反,你应该使用 cookies API。

在你的 load 函数中,你可以通过 cookies.get(name, options) 读取 cookie:

src/routes/+page.server
export function load({ cookies }) {
	const visited = cookies.get('visited');

	return {
		visited: visited === 'true'
	};
}

要设置 cookie,使用 cookies.set(name, value, options)。强烈建议在设置 cookie 时明确配置 path,因为浏览器的默认行为是将 cookie 设置在当前路径的父路径上,这种行为有些无用。

src/routes/+page.server
export function load({ cookies }) {
	const visited = cookies.get('visited');

	cookies.set('visited', 'true', { path: '/' });

	return {
		visited: visited === 'true'
	};
}

现在,如果你重新加载 iframe,Hello stranger! 将变成 Hello friend!

调用 cookies.set(name, ...) 会写入一个 Set-Cookie 头,同时也会更新内部的 cookie 映射,这意味着在同一个请求期间后续对 cookies.get(name) 的调用将返回更新后的值。在底层,cookies API 使用了流行的 cookie 包 —— 传递给 cookies.getcookies.set 的选项对应于 cookie 文档中的 parseserialize 选项。SvelteKit 设置了以下默认值以使你的 cookie 更安全:

{
	httpOnly: true,
	secure: true,
	sameSite: 'lax'
}

在 GitHub 编辑此页面

上一页 下一页
1
2
3
4
5
<script>
	let { data } = $props();
</script>
 
<h1>Hello {data.visited ? 'friend' : 'stranger'}!</h1>