SvelteKit中如何将服务端数据存入LocalStorage并解决重定向丢失问题

针对重定向前客户端存储逻辑无法执行的问题，提供三种实用解决方案：

方案1：服务器端存Cookie，客户端初始化时同步到LocalStorage #

核心思路是先在服务器端把用户信息写入可被客户端访问的Cookie，再在页面加载时自动同步到LocalStorage和状态管理store。

服务器端（+page.server.js）代码： #

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

export async function action({ request, cookies }) {
  // 完成登录校验逻辑，生成userInfo对象
  const context = { /* 你的用户信息结构 */ };

  // 写入非HttpOnly Cookie，允许客户端读取
  cookies.set('userInfo', JSON.stringify(context), {
    path: '/',
    maxAge: 86400, // 1天有效期
    httpOnly: false,
    secure: process.env.NODE_ENV === 'production' // 生产环境启用HTTPS
  });

  // 执行重定向
  throw redirect(303, '/dashboard');
}

客户端全局同步（+layout.svelte）代码： #

<script>
  import { LoginStatus } from '$lib/stores.js';

  // 页面初始化时读取Cookie，同步到LocalStorage和store
  const userInfoCookie = document.cookie.split('; ').find(row => row.startsWith('userInfo='));
  if (userInfoCookie) {
    const userInfo = JSON.parse(decodeURIComponent(userInfoCookie.split('=')[1]));
    const loginState = { loggedIn: true, userInfo };
    
    localStorage.setItem('loginStatus', JSON.stringify(loginState));
    $LoginStatus = loginState;
  }
</script>

方案2：用afterNavigate钩子在目标页面完成存储 #

利用SvelteKit的导航钩子，在重定向后的目标页面加载完成后，从服务器传递的页面数据中读取用户信息并存储。

登录页面服务器端（+page.server.js）代码： #

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

export async function action({ request, cookies }) {
  const context = { /* 用户信息 */ };
  // 先把用户信息写入服务器端可读取的Cookie
  cookies.set('userInfo', JSON.stringify(context), {
    path: '/',
    maxAge: 86400,
    httpOnly: true // 敏感信息用HttpOnly更安全
  });
  throw redirect(303, '/dashboard');
}

目标页面（/dashboard/+page.server.js）代码： #

export async function load({ cookies }) {
  const userInfoCookie = cookies.get('userInfo');
  if (userInfoCookie) {
    // 将用户信息传递给客户端页面
    return { userInfo: JSON.parse(userInfoCookie) };
  }
  // 未登录则跳转回登录页
  throw redirect(303, '/login');
}

目标页面客户端（/dashboard/+page.svelte）代码： #

<script>
  import { afterNavigate } from '$app/navigation';
  import { page } from '$app/stores';
  import { LoginStatus } from '$lib/stores.js';

  afterNavigate(() => {
    if ($page.data.userInfo) {
      const loginState = { loggedIn: true, userInfo: $page.data.userInfo };
      localStorage.setItem('loginStatus', JSON.stringify(loginState));
      $LoginStatus = loginState;
    }
  });
</script>

方案3：客户端存储完成后手动跳转 #

放弃服务器端重定向，改为客户端先完成LocalStorage存储，再手动触发页面跳转。

登录页面服务器端（+page.server.js）代码： #

export async function action({ request }) {
  // 完成登录逻辑，生成userInfo
  const context = { /* 用户信息 */ };
  // 返回成功状态、用户信息和目标跳转地址
  return { success: true, userInfo: context, redirectTo: '/dashboard' };
}

登录页面客户端（+page.svelte）代码： #

<script>
  import { LoginStatus } from '$lib/stores.js';
  import { goto } from '$app/navigation';
  let form;

  // 监听表单提交结果，完成存储后跳转
  $: if (form?.success) {
    const loginState = { loggedIn: true, userInfo: form.userInfo };
    localStorage.setItem('loginStatus', JSON.stringify(loginState));
    $LoginStatus = loginState;
    // 存储完成后执行跳转
    goto(form.redirectTo);
  }
</script>

<form method="POST" bind:this={form}>
  <!-- 你的登录表单元素 -->
</form>

注意事项 #

• 存储到LocalStorage的对象必须用JSON.stringify序列化，读取时用JSON.parse解析
• 敏感信息（如token）建议用HttpOnly Cookie存储，LocalStorage仅存非敏感的用户展示数据
• 可封装持久化Svelte Store，自动监听状态变化同步到LocalStorage，避免重复编写存储逻辑

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