メインコンテンツへスキップ

setHeaders関数はSet-Cookieヘッダーでは使用できません。代わりに、cookies APIを使用する必要があります。

load関数では、cookies.get(name, options)でクッキーを読み取ることができます

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

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

クッキーを設定するには、cookies.set(name, value, options)を使用します。ブラウザのデフォルトの動作は、現在のパスの親にクッキーを設定することであるため、クッキーを設定する際にはpathを明示的に構成することを強くお勧めします。

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ヘッダーが書き込まれますが、同時に内部のクッキーのマップも更新されます。つまり、同じリクエスト中に後でcookies.get(name)を呼び出すと、更新された値が返されます。内部的には、cookies APIは人気のcookieパッケージを使用しています。cookies.getおよびcookies.setに渡されるオプションは、cookieドキュメントparseおよびserializeオプションに対応しています。SvelteKitは、クッキーをより安全にするために、次のデフォルトを設定します

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

GitHubでこのページを編集

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