SvelteKit中如何编辑全局变量并传递至多个页面？

问题根源 #

你用window.location.href = "/dog"跳转页面时会触发整页刷新，Svelte Store存在内存中的状态会被重置为初始空字符串，所以Dog页面拿不到之前设置的犬种信息。

解决方案1：用SvelteKit客户端导航（推荐） #

SvelteKit的goto函数能实现无刷新的客户端路由跳转，Store的内存状态会被完整保留。

修正Landing Page代码： #

<script>
  import { goto } from '$app/navigation';
  import dog from '$lib/store'; // 确保store路径正确

  let dog_val = "" 
  const handleSubmit = async (e) => {
    e.preventDefault();
    dog.set(dog_val);
    await goto("/dog"); // 替换window.location.href
  }
</script>

<main>
  <input bind:value={dog_val} placeholder="搜索犬种" />
  <button on:click={handleSubmit}>查找该犬种</button>
</main>

Dog Page代码简化： #

用Svelte的$语法直接订阅Store，无需手动写subscribe逻辑：

<script>
  import dog from '$lib/store';
</script>

<main>
  <h1>{$dog}</h1>
</main>

解决方案2：将Store持久化到LocalStorage（支持页面刷新） #

如果需要页面刷新后仍保留犬种信息，可以修改Store让它同步到本地存储：

修正Store.js： #

import { writable } from "svelte/store";

// 从localStorage读取初始值，无值则为空
const initialValue = localStorage.getItem('dogBreed') || "";
const dog = writable(initialValue);

// 订阅Store变化，自动同步到localStorage
dog.subscribe(value => {
  localStorage.setItem('dogBreed', value);
});

export default dog;

这样不管是用goto还是硬刷新跳转，Dog页面都能获取到之前设置的犬种值。

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