SvelteKit中+page.ts用params.slug获取localStorage数据遇404问题

问题根源 #

SvelteKit默认启用服务器端渲染（SSR），+page.ts中的load函数会在服务器端执行，但localStorage是浏览器专属API，服务器环境无法访问。你的persisted store在服务器端会使用默认的空数组，导致find找不到对应slug的笔记，直接抛出404错误。

解决方案 #

方案1：仅在客户端执行数据查找 #

通过browser变量判断当前环境，服务器端返回占位数据，客户端再实际获取localStorage中的内容：

修改+page.ts：

import { browser } from '$app/environment';
import { get } from 'svelte/store';
import { notedata } from '$lib/store'; // 替换为你的store实际路径
import { error } from '@sveltejs/kit';

/** @type {import('./$types').PageLoad} */
export async function load({ params }) {
    // 服务器端返回空，避免提前抛出404
    if (!browser) {
        return { result: null };
    }

    const note = get(notedata).find(e => e.id === params.slug);
    
    if (note) {
        return { result: note };
    }

    // 客户端环境才抛出404
    error(404, 'Not found');
}

修改+page.svelte，处理客户端数据加载：

<script lang="ts">
    import { onMount } from 'svelte';
    import { page } from '$app/stores';
    import { get } from 'svelte/store';
    import { notedata } from '$lib/store';
    import { error } from '@sveltejs/kit';

    export let data;
    let note = data.result;

    onMount(() => {
        if (!note) {
            const targetSlug = $page.params.slug;
            note = get(notedata).find(e => e.id === targetSlug);
            
            if (!note) {
                error(404, 'Not found');
            }
        }
    });
</script>

{#if note}
    <h1>{note.title}</h1>
    <p>{note.note}</p>
    <small>创建于：{note.dateCreated}</small>
{:else}
    <p>加载中...</p>
{/if}

方案2：禁用当前页面的SSR #

如果你的笔记页面不需要SEO，可以直接设置为纯客户端渲染，让load函数仅在浏览器环境执行，直接访问localStorage：

修改+page.ts：

// 禁用服务器端渲染
export const ssr = false;

import { get } from 'svelte/store';
import { notedata } from '$lib/store';
import { error } from '@sveltejs/kit';

/** @type {import('./$types').PageLoad} */
export async function load({ params }) {
    const note = get(notedata).find(e => e.id === params.slug);
    
    if (note) {
        return { result: note };
    }

    error(404, 'Not found');
}

方案对比 #

• 方案1：保留SSR优势（SEO、首屏加载快），但需要额外处理客户端数据补全和加载状态。
• 方案2：实现简单，无需额外逻辑，但失去SSR优势，适合完全依赖客户端存储的页面。

内容的提问来源于stack exchange，提问作者boredcodebyk