如何在SvelteKit中实现全局购物车存储？

方案一：Stores + 本地存储（适合未登录用户） #

直接用 Svelte 自带的响应式 Stores 结合 localStorage，就能实现跨页面、刷新后仍保留的购物车状态。

• 实现思路：创建一个 writable store，初始化时从 localStorage 读取之前保存的购物车数据，同时监听 store 变化，实时同步到 localStorage。
• 代码示例：

// src/lib/stores/cart.js
import { writable } from 'svelte/store';

// 从本地存储读取初始购物车数据
const savedCart = localStorage.getItem('user-cart');
const initialCart = savedCart ? JSON.parse(savedCart) : [];

export const cart = writable(initialCart);

// 监听购物车变化，同步到本地存储
cart.subscribe((currentCart) => {
  localStorage.setItem('user-cart', JSON.stringify(currentCart));
});

• 优势：完全前端实现，响应式拉满，组件能实时获取购物车状态，页面跳转、刷新都不会丢数据。
• 局限：只在当前浏览器有效，用户换设备就看不到这个购物车了，适合未登录用户的临时购物车。

方案二：服务器端存储 + 前端 Stores 同步（适合已登录用户） #

如果是已登录用户，购物车数据必须持久化到服务器数据库，同时前端用 Stores 保持实时响应。

• 实现流程：
  • 页面加载时，调用后端接口拉取用户的购物车数据，初始化前端 store。
  • 组件触发购物车变更（加购、删除）时，先更新前端 store 让界面实时变化，再调用后端接口同步数据到服务器。
  • 未登录用户先用方案一的本地存储存临时购物车，登录后把临时数据同步到服务器。
• 优势：数据永久保存，跨设备同步，符合电商场景下登录用户的核心需求。
• 局限：需要后端配合写接口，首次加载要请求服务器。

方案三：结合 SSR 的 Page Data + Stores（适合服务端渲染场景） #

如果你的项目用了 SSR，要避免服务端渲染的页面和前端 hydration 后的状态不一致，就得用 SvelteKit 的 load 函数来初始化购物车。

• 实现思路：在根布局的 +layout.server.js 里通过 load 函数从服务器获取购物车数据，然后在根布局组件里把数据同步到前端 store。
• 代码示例：

// src/routes/+layout.server.js
export async function load({ locals }) {
  // 假设 locals 里有当前登录用户的信息
  const userCart = await getCartFromDatabase(locals.userId);
  return { cart: userCart };
}

<!-- src/routes/+layout.svelte -->
<script>
  import { cart } from '$lib/stores/cart.js';
  export let data;

  // 把服务器返回的购物车数据同步到前端 store
  $cart = data.cart;
</script>

• 优势：服务端渲染时能正确渲染购物车状态，不会出现页面加载后才显示购物车的闪烁问题。
• 局限：页面跳转时如果需要最新数据，可能要重新触发 load 或者前端主动调用接口同步。

总结 #

• 未登录用户：直接用 Stores + 本地存储，简单高效。
• 已登录用户：必须结合 服务器端存储 + 前端 Stores，兼顾实时性和数据持久化。
• 用 SSR 的项目：配合 load 函数初始化 store，避免 hydration 不匹配问题。

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