Svelte路由切换时如何避免HTML输入组件值重置？

以下几种方案可以解决这个问题，你可以根据自己的场景选择合适的：

1. 把状态提升到路由父组件 #

将文本框的状态（比如inputValue）从主页组件转移到路由的父组件（通常是App.svelte），再通过props传递给主页组件。切换路由时父组件不会被销毁，状态自然就能保留下来。

示例代码：

• App.svelte：

<script>
  import { Router, Route } from 'svelte-router-spa';
  import Home from './Home.svelte';
  import About from './About.svelte';

  let inputValue = '';
</script>

<Router>
  <Route path="/" component={Home} bind:inputValue />
  <Route path="/about" component={About} />
</Router>

• Home.svelte：

<script>
  export let inputValue;
</script>

<input type="text" bind:value={inputValue} placeholder="输入内容..." />

2. 用Context API共享状态 #

如果组件层级较深，不想用props层层传递，可以用Svelte的Context API存储状态，让主页组件从context中读取和修改值。

示例代码：

• 新建store.js：

import { writable, getContext, setContext } from 'svelte';

export function createInputStore() {
  const store = writable('');
  setContext('inputStore', store);
}

export function getInputStore() {
  return getContext('inputStore');
}

• App.svelte：

<script>
  import { Router, Route } from 'svelte-router-spa';
  import Home from './Home.svelte';
  import About from './About.svelte';
  import { createInputStore } from './store.js';

  createInputStore();
</script>

<Router>
  <Route path="/" component={Home} />
  <Route path="/about" component={About} />
</Router>

• Home.svelte：

<script>
  import { getInputStore } from './store.js';
  const inputStore = getInputStore();
</script>

<input type="text" bind:value={$inputStore} placeholder="输入内容..." />

3. 本地存储持久化（localStorage/sessionStorage） #

如果希望即使刷新页面，文本框的值也能保留，可以用本地存储。监听文本框变化，把值存在localStorage里，组件挂载时再读取出来。

示例代码（Home.svelte）：

<script>
  let inputValue = localStorage.getItem('homeInput') || '';

  $: localStorage.setItem('homeInput', inputValue);
</script>

<input type="text" bind:value={inputValue} placeholder="输入内容..." />

如果用sessionStorage替代localStorage，关闭浏览器标签后数据会自动清除，适合临时保存的场景。

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