SvelteKit中如何在+page.js文件中获取localStorage数据？

DevOps 小满

2026-7-27

问题原因与解决方案

为什么会出现`window is not defined`？

SvelteKit默认启用服务端渲染（SSR），+page.js中的load函数会先在服务器环境执行一次，而服务器端根本不存在window对象。你看到browser为true是客户端运行时的日志，但服务器端执行阶段已经抛出错误了。

另外你的stores.js也存在同样问题：服务器端加载store时，直接访问window.localStorage也会触发相同错误，只是你还没遇到而已。

修复步骤

1. 修正Store的服务器端兼容问题

修改src/stores/stores.js，添加browser判断确保只在客户端访问localStorage：

import { writable } from 'svelte/store';
import { browser } from '$app/environment';

// 仅在客户端读取localStorage，服务器端返回空数组
const storedUsers = browser ? JSON.parse(window.localStorage.getItem('users')) || [] : [];

export const users = writable(storedUsers);

// 仅在客户端订阅store并同步到localStorage
if (browser) {
    users.subscribe((value) => window.localStorage.setItem('users', JSON.stringify(value)));
}

2. 修正`mylist/+page.js`的load函数

在load中必须先判断browser，再访问window，同时推荐直接从store取数据（而非读localStorage），避免数据不一致：

import { browser } from '$app/environment';
import { users } from '$lib/stores/stores.js'; // 注意路径：如果store放在src/lib下用$lib，否则用正确相对路径
import { get } from 'svelte/store';

export async function load() {
    let myList = [];
    if (browser) {
        // 方式1：从store取（推荐，和localStorage已同步）
        myList = get(users);
        // 方式2：直接读localStorage
        // myList = JSON.parse(window.localStorage.getItem('users')) || [];
    }
    console.log({ browser, myList });
    return { myList };
}