Snapshots

L’état éphémère du DOM — comme les positions de défilement des barres latérales, le contenu des éléments <input> et ainsi de suite — est perdu lorsque vous naviguez d’une page à une autre.

Par exemple, si l’utilisateur ou l’utilisatrice remplit un formulaire mais navigue un peu sur votre application avant de revenir sur la page du formulaire pour le soumettre, ou si cette personne rafraîchit la page, les valeurs ayant été entrées dans le formulaire seront perdues. Dans les cas où il est important de conserver ces valeurs, vous pouvez prendre un snapshot de l’état du DOM, que vous pourrez ensuite restaurer si l’utilisateur ou l’utilisateur revient sur la page concernée.

Pour cela, exportez un objet snapshot avec des méthodes capture et restore depuis un fichier +page.svelte ou +layout.svelte :

<script>
	let comment = $state('');

	/** @type {import('./$types').Snapshot<string>} */
	export const snapshot = {
		capture: () => comment,
		restore: (value) => comment = value
	};
</script>

<form method="POST">
	<label for="comment">Commentaire</label>
	<textarea id="comment" bind:value={comment} />
	<button>Envoyer le commentaire</button>
</form>

<script lang="ts">
	import type { Snapshot } from './$types';

	let comment = $state('');

	export const snapshot: Snapshot<string> = {
		capture: () => comment,
		restore: (value) => comment = value
	};
</script>

<form method="POST">
	<label for="comment">Commentaire</label>
	<textarea id="comment" bind:value={comment} />
	<button>Envoyer le commentaire</button>
</form>

Lorsque vous quittez la page, la fonction capture est exécutée immédiatement avant que la page ne soit modifiée, et la valeur renvoyée est associée avec l’entrée courante dans la pile d’historique du navigateur. Si vous revenez sur cette page, la fonction restore sera exécutée avec la valeur enregistrée aussitôt que la page sera construite.

Les données doivent être sérialisables en tant que JSON afin qu’elles puissent être persistées dans le sessionStorage. Ceci permet que l’état soit restauré lors du rechargement de la page, ou lorsque l’utilisateur ou l’utilisatrice revient sur la page depuis un autre site.

Évitez de renvoyer de très gros objets depuis capture — une fois stockés, ces objets seront gardés en mémoire pour toute la durée de la session, et dans certains cas extrêmes peuvent être trop lourds pour être persistés dans le sessionStorage.