document headers and cookies

Author: Rich Harris

content/tutorial/03-sveltekit/04-headers-and-cookies/01-headers/README.md

@@ -0,0 +1,18 @@
+---
+title: Setting headers
+---
+
+Inside a `load` function (as well as in [form actions](the-form-element), [hooks](handle) and [API routes](get-handlers), which we'll learn about later) you have access to a `setHeaders` function, which — unsurprisingly — can be used to set headers on the response.
+
+Most commonly, you'd use it to customise caching behaviour with the [`Cache-Control`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control) response header, but for the sake of this tutorial we'll do something less advisable and more dramatic:
+
+```js
+/// file: src/routes/+page.server.js
+export function load(+++{ setHeaders }+++) {
++++	setHeaders({
+		'Content-Type': 'text/plain'
+	});+++
+}
+```
+
+(You may need to reload the iframe to see the effect.)

content/tutorial/03-sveltekit/04-headers-and-cookies/01-headers/app-a/src/routes/+page.server.js

@@ -0,0 +1,3 @@
+export function load() {
+	// set headers
+}

content/tutorial/03-sveltekit/04-headers-and-cookies/01-headers/app-a/src/routes/+page.svelte

@@ -0,0 +1 @@
+<h1>hello world</h1>

content/tutorial/03-sveltekit/04-headers-and-cookies/01-headers/app-b/src/routes/+page.server.js

@@ -0,0 +1,5 @@
+export function load({ setHeaders }) {
+	setHeaders({
+		'Content-Type': 'text/plain'
+	});
+}

content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/README.md

@@ -0,0 +1,46 @@
+---
+title: Reading and writing cookies
+---
+
+The [`setHeaders`](headers) function can't be used with the `Set-Cookie` header. Instead, you should use the `cookies` API.
+
+In your `load` functions, you can read a cookie with `cookies.get(name, options)`:
+
+```js
+/// file: src/routes/+page.server.js
+export function load(+++{ cookies }+++) {
+	+++const visited = cookies.get('visited');+++
+
+	return {
+		visited
+	};
+}
+```
+
+To set a cookie, you `cookies.set(name, value, options)`. It's strongly recommended that you explicitly configure the `path` when setting a cookie, since browsers' default behaviour — somewhat uselessly — is to set the cookie on the parent of the current path.
+
+```js
+/// file: src/routes/+page.server.js
+export function load({ cookies }) {
+	const visited = cookies.get('visited');
+
+	+++cookies.set('visited', 'true', { path: '/' });+++
+
+	return {
+		visited
+	};
+}
+```
+
+Now, if you reload the iframe, `Hello stranger!` becomes `Hello friend!`.
+
+Calling `cookies.set(name, ...)` causes a `Set-Cookie` header to be written, but it _also_ updates the internal map of cookies, meaning any subsequent calls to `cookies.get(name)` during the same request will return the updated value. Under the hood, the `cookies` API uses the popular `cookie` package — the options passed to `cookies.get` and `cookies.set` correspond to the `parse` and `serialize` options from the `cookie` [documentation](https://github.com/jshttp/cookie#api). SvelteKit sets the following defaults to make your cookies more secure:
+
+```js
+/// no-file
+{
+	httpOnly: true,
+	secure: true,
+	sameSite: 'lax'
+}
+```

content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/app-a/src/routes/+page.server.js

@@ -0,0 +1,7 @@
+export function load() {
+	const visited = false;
+
+	return {
+		visited
+	};
+}

content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/app-a/src/routes/+page.svelte

@@ -0,0 +1,5 @@
+<script>
+	export let data;
+</script>
+
+<h1>Hello {data.visited ? 'friend' : 'stranger'}!</h1>

content/tutorial/03-sveltekit/04-headers-and-cookies/02-cookies/app-b/src/routes/+page.server.js

@@ -0,0 +1,9 @@
+export function load({ cookies }) {
+	const visited = cookies.get('visited');
+
+	cookies.set('visited', 'true', { path: '/' });
+
+	return {
+		visited
+	};
+}

content/tutorial/03-sveltekit/04-headers-and-cookies/meta.json

@@ -0,0 +1,3 @@
+{
+	"title": "Headers and cookies"
+}