如何在SvelteKit中将+page.server.js的数据传递给nextpage下的+page.svelte

你遇到的核心问题有两个：一是服务器端全局变量不可靠，二是异步请求未完成就跳转导致数据未正确传递。下面我会一步步拆解问题，并给出标准的SvelteKit解决方案。

为什么当前方法不生效？ #

1. 服务器端全局变量的局限性：你在+page.server.js里定义的let myObject = {}是全局变量，服务器端会被所有请求共享，不仅有并发冲突风险，而且当你用window.location = "/nextpage"跳转时，这是一个全新的HTTP请求，/nextpage的load函数根本拿不到之前请求里的myObject。
2. 异步请求未等待完成：你的fetch是异步操作，但你立刻执行了window.location跳转，可能服务器还没处理完表单数据，就已经跳转到新页面了。

推荐解决方案：服务器动作重定向 + Flash Cookie #

这是SvelteKit处理这类场景的标准方式，安全且符合框架设计逻辑。

步骤1：修改根目录的+page.server.js #

处理完表单数据后，将数据存入临时Cookie（Flash Cookie，仅在下次请求有效），然后重定向到/nextpage：

import { redirect } from '@sveltejs/kit';

export const actions = {     
    results: async({ request, cookies }) => {
        const formData = await request.formData();         
        // 将FormData转为对象
        const myObject = Object.fromEntries(formData);
        console.log(myObject);

        // 把数据存入临时Cookie，设置短有效期
        cookies.set('myObject', JSON.stringify(myObject), {
            path: '/',
            httpOnly: true,
            maxAge: 60 // 1分钟足够完成跳转
        });

        // 303重定向是表单提交后的标准做法
        throw redirect(303, '/nextpage');
    } 
}

步骤2：修改根目录的+page.svelte #

放弃原生fetch+window.location，改用SvelteKit的表单机制，自动处理异步请求和重定向：

<script>
    let myObject = {
        // 你的数据字段，比如name: "test", age: 20
    };
</script>

<!-- 用表单提交，自动触发服务器动作 -->
<form method="POST" action="?/results">
    <!-- 将myObject的字段转为隐藏输入，传递给服务器 -->
    {#each Object.entries(myObject) as [key, value]}
        <input type="hidden" name={key} value={value} />
    {/each}
    <button type="submit">提交并跳转</button>
</form>

如果想用JS触发提交（而非原生表单），可以用use:enhance增强表单：

<script>
    import { enhance } from '$app/forms';
    let myObject = { /* 你的数据 */ };

    const handleSubmit = () => {
        const form = document.createElement('form');
        form.method = 'POST';
        form.action = '?/results';
        form.enctype = 'multipart/form-data';

        // 把myObject转为表单字段
        for (const [key, value] of Object.entries(myObject)) {
            const input = document.createElement('input');
            input.type = 'hidden';
            input.name = key;
            input.value = value;
            form.appendChild(input);
        }

        document.body.appendChild(form);
        form.dispatchEvent(new Event('submit', { bubbles: true }));
        form.remove();
    }
</script>

<button on:click={handleSubmit}>提交并跳转</button>

步骤3：修改/nextpage/+page.server.js #

在load函数里读取临时Cookie，拿到数据后立即删除Cookie（避免残留）：

import { redirect } from '@sveltejs/kit';

export const load = async({ cookies }) => {
    const myObjectCookie = cookies.get('myObject');
    // 如果没有数据，重定向回根页面
    if (!myObjectCookie) throw redirect(303, '/');

    const myObject = JSON.parse(myObjectCookie);
    // 清除临时Cookie
    cookies.delete('myObject', { path: '/' });

    return { myObject };
}

步骤4：/nextpage/+page.svelte展示数据 #

现在就能正常拿到data了：

<script>
    export let data;
</script>

<!-- 格式化展示数据 -->
<pre>{JSON.stringify(data.myObject, null, 2)}</pre>

备选方案：客户端会话存储（适合非敏感数据） #

如果数据不需要服务器端处理，可以直接存在客户端sessionStorage，但注意敏感数据不能用这种方式：

根目录+page.svelte修改： #

const handleSubmit = async () => {
    const formData = new FormData();
    for(const name in myObject){
        formData.append(name, myObject[name]);
    }
            
    // 等待请求完成再跳转
    const response = await fetch('?/results', {
        method: 'POST',
        body: formData
    });

    if (response.ok) {
        sessionStorage.setItem('myObject', JSON.stringify(myObject));
        window.location = "/nextpage";
    }
}

/nextpage/+page.svelte读取数据： #

<script>
    import { onMount } from 'svelte';
    let myObject = {};

    onMount(() => {
        const stored = sessionStorage.getItem('myObject');
        if (stored) {
            myObject = JSON.parse(stored);
            sessionStorage.removeItem('myObject'); // 用完删除
        }
    });
</script>

<pre>{JSON.stringify(myObject, null, 2)}</pre>

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