SvelteKitのsnapshotでページ離脱時の入力内容を復元した話

<script lang="ts">
  let title = $state('');

  export const snapshot = {
    // ページを離れるときに呼ばれる（保存したい値を返す）
    capture: () => title,

    // 戻ってきたときに呼ばれる（保存した値を受け取る）
    restore: (value: string) => {
      title = value;
    },
  };
</script>

<script lang="ts">
  import { enhance } from '$app/forms';
  import { beforeNavigate } from '$app/navigation';

  let { data, form } = $props();
  let title = $state('');

  export const snapshot = {
    capture: () => title,
    restore: (value: string) => {
      title = value;
    },
  };

  beforeNavigate(({ cancel }) => {
    if (title.trim()) {
      if (!confirm('入力中のタスクがあります。離れますか？')) {
        cancel();
      }
    }
  });
</script>

<form method="POST" action="?/create" use:enhance>
  <input type="text" name="title" bind:value={title} placeholder="タスクを入力" />
  <button type="submit">追加</button>
  {#if form?.error}
    <p style="color: red">{form.error}</p>
  {/if}
</form>

<script lang="ts">
  let title = $state('');
  let priority = $state('medium');
  let memo = $state('');

  export const snapshot = {
    capture: () => ({ title, priority, memo }),

    restore: (value: { title: string; priority: string; memo: string }) => {
      title = value.title;
      priority = value.priority;
      memo = value.memo;
    },
  };
</script>