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