svelte - 如何检索 Sveltekit page.js 文件上的 localStorage 数据？

Question

我是 Sveltekit 新手，我正在尝试在不同路线之间共享数据。我知道存储存储在内存中，并在我们更改路线时消失，这就是为什么我使用 localStorage 在路线之间保留数据。

src/stores/stores.js

import { writable } from 'svelte/store';

const storedUsers = JSON.parse(window.localStorage.getItem('users')) || [];

export const users = writable(storedUsers);

users.subscribe((value) => window.localStorage.setItem('users', JSON.stringify(value)));

当我的应用程序启动时，我可以通过执行以下操作来更新 src/routes/+page.svelte 默认路由上的商店:

src/routes/+page.svelte

<script>
    import { users } from './stores/stores.js';

    function addUser() {
        users.update(list => [...list, `user-${list.length}`]);
    }
</script>

<button on:click={addUser}>Add User</button>

但是，当我尝试从另一个路由(使用+page.js)检索此列表时，我收到ReferenceError:窗口未定义。我知道这段代码是在浏览器上运行的，那么为什么没有定义 window 呢？如何检索 localStorage 数据？

src/routes/mylist/+page.js

import { browser } from '$app/environment';

export async function load() {
    const myList = await JSON.parse(window.localStorage.getItem('mylist'));
    console.log({ browser, myList }); // browser is true
}

Answer 1

从+page.js加载函数实际上在客户端和服务器上运行。这就是您收到该错误的原因。

最简单的解决方案是根本不使用localStorage。我认为适合您的情况最好的主意是使用 sveltekit hooks ，以及 locals 参数。

脚手架看起来像这样:

import type { Handle } from '@sveltejs/kit';
 
export const handle = (async ({ event, resolve }) => {
  event.locals.user = /* your things */;

  return await resolve(event);
}) satisfies Handle;

如果您想继续使用 localStorage，我认为您只需要检查您是否在浏览器中的加载功能上(最好的方法是使用 the browser const that sveltekit exports )，或者执行以下操作使用 onMount 回调在 +page.js 中“获取”数据。